サンキー チャートを使用してハイチャートにデータを表示する方法

サンキー ダイアグラムを使用してハイチャートにデータを表示する方法

サンキー ダイアグラムは、フロー、エネルギー、資金などのチャート タイプを視覚化するために使用される一種の複雑なプロセスです。さまざまなノード間の関係とフローを明確に表示できるため、データの理解と分析が容易になります。この記事では、Highcharts を使用して Sankey チャートを作成およびカスタマイズする方法を、具体的なコード例とともに紹介します。

まず、Highcharts ライブラリと Sankey モジュールをロードする必要があります。 HTML ページでは、次のコードを使用してこれを導入できます:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>

次に、グラフを配置するコンテナを定義する必要があります。 HTML ページに div 要素を作成し、一意の id を指定できます。例:

<div id="container"></div>

次に、JavaScript で次のコードを使用してサンキー チャートを作成できます:

Highcharts.chart('container', {
  chart: {
    type: 'sankey'
  },
  title: {
    text: '数据流动示例'
  },
  series: [{
    data: [{
      name: '节点1'
    }, {
      name: '节点2'
    }, {
      name: '节点3'
    }],
    links: [{
      source: '节点1',
      target: '节点2',
      value: 10
    }, {
      source: '节点1',
      target: '节点3',
      value: 5
    }, {
      source: '节点2',
      target: '节点3',
      value: 3
    }],
    nodeWidth: 30,
    nodePadding: 10,
    colorByPoint: true,
    tooltip: {
      pointFormat: '<b>{point.name}</b>: {point.value}'
    }
  }]
});

上記のコードでは、最初にチャートのタイプを として指定します。サンキー 。そして、seriesでデータとリンクの関係を定義します。各ノードは name で識別され、リンクは source、target、および value で記述されます。このうち、source は開始ノード、target はターゲットノード、value はトラフィックの値を表します。 nodeWidth と nodePadding を調整してノードの幅と間隔を制御したり、colorByPoint でノードの色を設定したり、tooltip## を使用したりすることもできます。 # マウスホバー時のプロンプト情報を定義します。

最後に、

Highcharts.chart メソッドを呼び出して、指定したコンテナーにグラフをレンダリングします。

実際の使用では、特定のニーズに応じてチャートをさらにカスタマイズできます。たとえば、タイトル、軸、色などを設定できます。以下は、より完全なサンプル コードです。

Highcharts.chart('container', {
  chart: {
    type: 'sankey'
  },
  title: {
    text: '数据流动示例'
  },
  plotArea: {
    colorByPoint: true
  },
  series: [{
    data: [{
      name: '节点1'
    }, {
      name: '节点2'
    }, {
      name: '节点3'
    }],
    links: [{
      source: '节点1',
      target: '节点2',
      value: 10
    }, {
      source: '节点1',
      target: '节点3',
      value: 5
    }, {
      source: '节点2',
      target: '节点3',
      value: 3
    }],
    nodeWidth: 30,
    nodePadding: 10,
    colors: ['#7cb5ec', '#2f7ed8', '#434348'],
    tooltip: {
      pointFormat: '<b>{point.name}</b>: {point.value}'
    }
  }]
});

上記のコードでは、

plotArea 属性を通じてノードの色を設定し、colors を通じてノードの色を指定します。 属性。カスタムカラー。このようにして、異なるノードには異なる色が表示されます。

上記のコード例を通じて、サンキー チャートを使用してデータをハイチャートに表示できます。この記事があなたのお役に立ち、実際のアプリケーションで使用できることを願っています。

以上がサンキー チャートを使用してハイチャートにデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。