Highcharts.js の Export を有効にして Context button を表示するには
この記事は約 5 分で読めます。
Javascriptグラフ描画ライブラリ
highcharts.js ※ は、
highcharts.js 本体のみだと
Context button は表示されません。
※ 商用サイトの場合はLicenses を
取得する必要があります。
どうすれば
表示されるのでしょう?

Export module を使用すると、
ユーザーは chartを
PDF、PNG、JPG、または SVG vector image
としてダウンロードできます。
To enable exporting, the module needs to be included,
Export module
When enabled, a context button with a menu appears in the top right corner of the chart.
エクスポートを有効にするには、モジュールを含める必要があります。
有効にすると、メニュー付きのコンテキストボタンがチャートの右上隅に表示されます。
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- optional -->
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
オプションの
export data module は
Chart の CSV、XLS、
Data table をエクスポート
するのに必要になります。
offline-exporting.js モジュールを
使用する場合、ダウンロードは
クライアント側で作成できます。
公式ドキュメントでは
その他に、Accessibility module を
含める事をおすすめしています。
We recommend to always include the accessibility module, unless there is an explicit reason not to do so.
Accessibility module
We also recommend including the exporting and export-data modules.
These modules should be loaded before the Accessibility module.
明示的な理由がない限り、常にアクセシビリティモジュールを含めることをお勧めします。
また、エクスポートおよびエクスポートデータモジュールを含めることをお勧めします。
これらのモジュールは、アクセシビリティモジュールの前にロードする必要があります。
上記から、
以下のようにモジュールを
含めるのがよいようです。
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
モジュールを含めて
エクスポートを
有効にする事が出来ました。

デフォルトは
#666666
です。このように
色、形、大きさ、text など、
様々なオプションが用意されています。
さて、このボタンメニューを
日本語にするには
どうすればよいのでしょう?

Language object を使用します。
Language object はチャートの
初期化ごとに設定することはできません。
Highcharts.setOptions
を使用し、
チャートを初期化する前に設定します。
以下のように
Module menu の文字列を
日本語に置き換えます。
Highcharts.setOptions({
lang: {
contextButtonTitle: '画像としてダウンロード',
printChart: 'グラフを印刷',
downloadCSV: 'ダウンロード CSV',
downloadJPEG: 'JPEG画像でダウンロード',
downloadPDF: 'PDF文書でダウンロード',
downloadPNG: 'PNG画像でダウンロード',
downloadSVG: 'SVG形式でダウンロード',
downloadXLS: 'ダウンロード XLS',
viewFullscreen: 'Fullscreen 表示',
viewData: 'Data表を見る',
openInCloud: 'Highcharts Cloudで開く'
}
});
以下が結果になります。
Chart の Context buttonを
クリックして Module menu の
文字列を確認してください。
日本語の文字列になりましたね。
Basic line chart showing trends in a dataset. This chart includes the
series-label
module, which adds a label to each line for
enhanced readability.
是非参考にしてみてください。
貴重なお時間を割き、最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません