2ヶ月前に投稿

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

この記事は約 5 分で読めます。

4.5

Javascriptグラフ描画ライブラリ
highcharts.js ※ は、
highcharts.js 本体のみだと
Context button は表示されません。

※ 商用サイトの場合はLicenses
取得する必要があります。

どうすれば
表示されるのでしょう?

Context button が表示された状態

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>

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

ボタンの位置と様々なスタイルは、
navigation.buttonOptions 及び
export.buttons.contextButton
使用して編集できます。
Blue symbol stroke
symbol stroke の色を Blueにした状態。
デフォルトは #666666 です。
このように
色、形、大きさ、text など、
様々なオプションが用意されています。

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

Context button with a menu

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.

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

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Highcharts.js の Export を有効にして Context button を表示するには