参考にさせていただいたページ
highcharts/highcharts-vue GitHub
highcharts 公式ドキュメント
今回使用しているバージョン
highcharts-vue v1.4.0 を使用していて、highcharts v9.2.2に依存しているようです。
- highcharts-vue v1.4.0
- highcharts v9.2.2
前提
npmとかyarnで、highchartsとhighcharts-vueをインストールしてあります。
highcharts-vueのコンポーネントに渡せるpropsについて
GitHubのREADME「GitHub - highcharts/highcharts-vue」を読むと、以下のような感じでpropsが渡せるようです。 詳細は公式READMEを読んでみてください。
<highcharts :options="chartOptions" :constructor-type="constructorType" :callback="callback" :update-args="updateArgs" :highcharts="highcharts" :deep-copy-on-update="deepCopyOnUpdate" />
optionsの型について
optionsの型はこんな感じでimportできます。
import { Options as ChartOptions } from 'highcharts';
Optionsは以下のような感じで定義されていました。
実際にはコメントが沢山書いてありますが、省略しています。
最新の情報、正しい情報は公式ドキュメントや実際のソースコードなどを参照してください。
export interface Options {
accessibility?: AccessibilityOptions;
annotations?: Array<AnnotationsOptions>;
boost?: BoostOptions;
caption?: CaptionOptions;
chart?: ChartOptions;
colorAxis?: (ColorAxisOptions|Array<ColorAxisOptions>);
colors?: Array<ColorString>;
connectors?: ConnectorsOptions;
credits?: CreditsOptions;
data?: DataOptions;
defs?: (DefsOptions|Dictionary<ASTNode>);
drilldown?: DrilldownOptions;
exporting?: ExportingOptions;
global?: GlobalOptions;
lang?: LangOptions;
legend?: LegendOptions;
loading?: LoadingOptions;
mapNavigation?: MapNavigationOptions;
navigation?: NavigationOptions;
navigator?: NavigatorOptions;
noData?: NoDataOptions;
pane?: PaneOptions;
plotOptions?: PlotOptions;
rangeSelector?: RangeSelectorOptions;
responsive?: ResponsiveOptions;
scrollbar?: ScrollbarOptions;
series?: Array<SeriesOptionsType>;
stockTools?: StockToolsOptions;
subtitle?: SubtitleOptions;
time?: TimeOptions;
title?: TitleOptions;
tooltip?: TooltipOptions;
xAxis?: (XAxisOptions|Array<XAxisOptions>);
yAxis?: (YAxisOptions|Array<YAxisOptions>);
zAxis?: (ZAxisOptions|Array<ZAxisOptions>);
}
一応補足しておくと「node_modules/highcharts/highcharts.d.ts」の中を export interface Options で検索すると見つかりました。
「frontend/node_modules/highcharts-vue/types/highcharts-vue.d.ts」の中を読むと以下のように書いてあったりもするので、そこから辿っても見つかると思います。
import * as Highcharts from "highcharts"
〜省略〜
declare module 'vue/types/options' {
interface ComponentOptions<V extends _Vue> {
constructorType?: string;
options?: Highcharts.Options;
callback?: Highcharts.ChartCallbackFunction;
updateArgs?: Array<ChartUpdateArgs>;
highcharts?: typeof Highcharts;
deepCopyOnUpdate?: boolean;
}
}
optionsが持っているプロパティについて
とりあえず今自分が知りたいことについて調べてみます。
chart
概要説明
General options for the chart.
概要説明(日本語)
このチャート自体の全般の設定
設定例
chart: {
type: 'areaspline',
plotBorderWidth: 1,
plotBorderColor: '#eeeeee',
marginRight: 20,
marginTop: 40,
},
credits
概要説明
Highchart by default puts a credits label in the lower right corner of the chart. This can be changed using these options.
概要説明(日本語)
Highchartはデフォルトで、チャートの右下隅にクレジットラベルを配置します。 これは、これらのオプションを使用して変更できます。
設定例
credits: {
enabled: false,
},
title
概要説明
The chart's main title.
概要説明(日本語)
チャートのメインタイトル
設定例
title: {
text: '任意のタイトル文字列',
},
xAxis
概要説明
The X axis or category axis. Normally this is the horizontal axis, though if the chart is inverted this is the vertical axis. In case of multiple axes, the xAxis node is an array of configuration objects.
See the Axis class for programmatic access to the axis.
概要説明(日本語)
X軸またはカテゴリ軸。 通常、これは横軸ですが、チャートが反転している場合、これは縦軸です。 複数の軸の場合、xAxisノードは構成オブジェクトの配列です。
軸へのプログラムによるアクセスについては、Axisクラスを参照してください。
ObjectまたはArrayが渡せるらしいです。
設定例
yAxis
概要説明
The Y axis or value axis. Normally this is the vertical axis, though if the chart is inverted this is the horizontal axis. In case of multiple axes, the yAxis node is an array of configuration objects.
See the Axis object for programmatic access to the axis.
概要説明(日本語)
Y軸または値軸。 通常、これは垂直軸ですが、チャートが反転している場合、これは水平軸です。 複数の軸の場合、yAxisノードは構成オブジェクトの配列です。
軸へのプログラムによるアクセスについては、Axisオブジェクトを参照してください。
ObjectまたはArrayが渡せるらしいです。
設定例
series
概要説明
Series options for specific data and the data itself. In TypeScript you have to cast the series options to specific series types, to get all possible options for a series.
概要説明(日本語)
特定のデータとデータ自体のシリーズオプション。 TypeScriptでは、シリーズのすべての可能なオプションを取得するために、シリーズオプションを特定のシリーズタイプにキャストする必要があります。
ObjectまたはArrayが渡せるらしいです。
設定例
legend
概要説明
The legend is a box containing a symbol and name for each series item or point item in the chart. Each series (or points in case of pie charts) is represented by a symbol and its name in the legend.
It is possible to override the symbol creator function and create custom legend symbols.
概要説明(日本語)
凡例は、チャート内の各シリーズアイテムまたはポイントアイテムの記号と名前を含むボックスです。 各シリーズ（または円グラフの場合はポイント）は、凡例に記号とその名前で表されます。
シンボル作成機能をオーバーライドして、カスタム凡例シンボルを作成することができます。
設定例
legend: {
align: 'left',
x: 100,
squareSymbol: true,
symbolHeight: 12,
borderColor: 'black',
},
tooltip
概要説明
Options for the tooltip that appears when the user hovers over a series or point.
概要説明(日本語)
ユーザーがシリーズまたはポイントにカーソルを合わせたときに表示されるツールチップのオプション。
設定例
tooltip: {
backgroundColor: '#ffffff',
borderWidth: 1,
borderRadius: 4,
useHTML: true,
formatter: function (): string {
return `<div><span>${this.x}</span><span>${this.y}</span></div>`;
}
},
その他
Optionsによって設定できる項目は、他にもまだまだ沢山あるので、必要な方は公式ドキュメントで調べてみてください。
optionsに渡すオブジェクトの例
そのうち書きます。
import { Options as ChartOptions } from 'highcharts';
const chartOptions: ChartOptions = {
}
