Highchartsダッシュボード

このチュートリアルでは、同期されたデータを使用したレスポンシブでインタラクティブなHighchartsダッシュボードの作成方法を説明します。 Highchartsダッシュボードライブラリを利用すれば、ダッシュボードの作成が簡単になります。

結果は次のようなダッシュボードになります。

Highchartsコアライブラリが初めてでもご心配なく。 Highchartsダッシュボードの設定はユーザーフレンドリーです。 この例のコードを見て、どれだけ簡単か確認しましょう。

ゴールは、1歳児の世界的なポリオ（pol3）予防接種率を表示するダッシュボードを作成することです。 データは世界保健機関（WHO）から収集されます。 要件には、4つのエリアチャートが含まれます：世界のカバー率が1つ、東南アジア用が1つ、アフリカとヨーロッパ用の2つの横並びのチャート。 上の2つのチャートは、下の2つのチャートと同様に同期させる必要があります。

このダッシュボードを4つの簡単なステップで作成してみましょう。 Highchartsダッシュボードライブラリがほとんどの作業をやってくれるため、 データを取得してチャートを同期するために適切なオプションを使用するだけです。

ステップ１：ライブラリ
ダッシュボードを構築するために必要なすべてのライブラリを取得してください。

        <script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/accessibility.js"></script>
        <script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>
        

各ライブラリの説明はこのチュートリアルの範囲を超えていますが、 詳細についてはHighchartsのドキュメントを確認してください。

ステップ２：データセット
CSV形式でデータを取得して設定します。

<pre id="csv">x,Global,Africa,Europe,South-East Asia
        946684800000,73,54,94,64
        978307200000,73,55,94,65
        1009843200000,74,59,93,65
        

dataPoolオブジェクトを使用して、上下2つのチャート用に別々のデータセットを作成します。 別々のデータセット技術は、上記で述べた同期に役立ちます。

dataPool: {
        connectors: [{
          id: 'connector-1',
          type: 'CSV',
          options: {
            csv: csvData
          }
        }, {
          id: 'connector-2',
          type: 'CSV',
          options: {
            csv: csvData
          }
        }]
      },

ステップ３：レイアウトの作成
guiオブジェクトを使用して、次のようにチャートレイアウトを構造化します。

gui: {
        layouts: [{
          id: 'layout-1',
          rows: [{
            cells: [{
              id: 'dashboard-col-1'
            }]
          }, {
            cells: [{
              id: 'dashboard-col-2'
            }]
          }, {
            cells: [{
              id: 'dashboard-col-3'
            }, {
              id: 'dashboard-col-4'
            }]
          }]
        }]
      }

各セルは、1つ以上のチャートをグループ化して、必要なレイアウト （上部に2つの単一チャート、下部に2つの並列チャート）を取得します。

ステップ４：チャートの作成 componentsオブジェクトを使用して、 セルID,、コネクタID、 取得するデータ（columnAssignmentオブジェクトを使用）、通常のHighcharts設定（chartOptionsオブジェクト） を指定してチャートを作成します。 syncオブジェクトもextremesとhighlightオプションで使用していることに注意してください。 extremesはチャート間の選択またはパンニングを同期し、highlightはチャート間のホバー処理を同期します。 最後に、このデモでは、データを取り出すカラムが少ないため、不要なデータはcolumnAssignmentオブジェクトで捨てています。 例えば、グローバルデータを表示するために、ヨーロッパ、アフリカ、東南アジアをnullに設定しています：

columnAssignment: {
        x: 'x',
        Europe: null,
        Africa: null,
        'South-East Asia': null
      },

同期されたデータで完全に機能するHighchartsダッシュボードが構築されました。