Highcharts.js の Export を有効にして Context button を表示するには

2019年12月25日

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,
When enabled, a context button with a menu appears in the top right corner of the chart.
エクスポートを有効にするには、モジュールを含める必要があります。
有効にすると、メニュー付きのコンテキストボタンがチャートの右上隅に表示されます。

Export module

<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.
We also recommend including the exporting and export-data modules.
These modules should be loaded before the Accessibility module.
明示的な理由がない限り、常にアクセシビリティモジュールを含めることをお勧めします。
また、エクスポートおよびエクスポートデータモジュールを含めることをお勧めします。
これらのモジュールは、アクセシビリティモジュールの前にロードする必要があります。

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>

モジュールを含めて
エクスポートを
有効にする事が出来ました。

さて、このボタンメニューを
日本語にするには
どうすればよいのでしょう？

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 の
文字列を確認してください。
日本語の文字列になりましたね。

是非参考にしてみてください。