サンキーチャートを使用してハイチャートにデータを表示する方法-jsチュートリアル-php.cn

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

王林

リリース： 2023-12-17 16:41:21

オリジナル

1011 人が閲覧しました

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

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

サンキーダイアグラムは、フロー、エネルギー、資金などのチャートタイプを視覚化するために使用される一種の複雑なプロセスです。さまざまなノード間の関係とフローを明確に表示できるため、データの理解と分析が容易になります。この記事では、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 サイトの他の関連記事を参照してください。