ネットワークダイアグラムを使用してハイチャートにデータを表示する方法-jsチュートリアル-php.cn

ネットワークダイアグラムを使用してハイチャートにデータを表示する方法

WBOY

リリース： 2023-12-17 08:05:28

オリジナル

1259 人が閲覧しました

ネットワークダイアグラムを使用してハイチャートにデータを表示する方法

ネットワークダイアグラムは、データを表示する非常に一般的な方法であり、データと接続の関係を視覚的に表示できます。人気のデータ視覚化ツールライブラリとして、Highcharts はネットワーク図の描画もサポートしています。この記事では、ネットワークダイアグラムを使用してハイチャートにデータを表示する方法を紹介し、具体的なコード例を示します。

Highcharts を使用してネットワークダイアグラムを描画するには、Highcharts ライブラリとネットワークグラフモジュールを導入する必要があります。具体的な手順は次のとおりです。

Highcharts ライブラリとネットワークグラフモジュールの導入

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

ログイン後にコピー

データの準備
ネットワークグラフデータは通常、ノードを使用します。 (ノード) にリンクされ、リンクの形式で保存されます。ノードはデータの実体を表し、エッジはノード間の接続を表します。たとえば、次のデータを準備できます。
```
var nodes = [{
  id: 'A',
  name: 'Node A'
}, {
  id: 'B',
  name: 'Node B'
}, {
  id: 'C',
  name: 'Node C'
}];

var links = [{
  from: 'A',
  to: 'B'
}, {
  from: 'B',
  to: 'C'
}];
```
ログイン後にコピー

ハイチャートチャートの初期化

Highcharts.chart('container', {
  chart: {
 type: 'networkgraph',
 plotBorderWidth: 1
  },
  title: {
 text: 'Network Graph'
  },
  series: [{
 data: nodes,
 keys: ['id', 'name'],
 type: 'networkgraph'
  }, {
 data: links,
 keys: ['from', 'to'],
 type: 'networkgraph'
  }]
});

ログイン後にコピー

上記のコードでは、最初に ## を作成します。 # Networkgraph タイプのチャートであり、いくつかの基本的なスタイルとタイトルで構成されています。次に、series 属性を使用してノードとエッジのデータソースを指定し、keys 属性を使用してデータ内のフィールド名を指定しました。

ノードとエッジのスタイルをカスタマイズする
ネットワーク図のノードとエッジは、ニーズに応じてカスタマイズできます。たとえば、ノードの色、サイズ、形状、およびエッジの色と幅を調整できます。簡単な例を次に示します。
```
Highcharts.chart('container', {
  // ...
  series: [{
 // ...
 dataLabels: {
   enabled: true,
   format: '{point.name}'
 },
 marker: {
   radius: 10,
   symbol: 'circle'
 }
  }, {
 // ...
 color: 'gray',
 width: 2
  }]
});
```
ログイン後にコピー

上記の例では、

dataLabels 属性を使用してノードの上にノードの名前を表示し、## を渡します。 #marker 属性はノードの半径と形状を指定します。同時に、color プロパティと width プロパティを使用して、側面の色と幅もカスタマイズしました。上記の手順により、Highcharts で簡単なネットワーク図を描画してデータを表示できます。もちろん、Highcharts にはさらに多くの構成オプションと対話型機能も用意されており、必要に応じてより深いカスタマイズが可能です。

概要:

この記事では、ネットワークダイアグラムを使用してハイチャートにデータを表示する方法を紹介し、具体的なコード例を示します。データを構成し、チャートを初期化し、スタイルをカスタマイズすることで、さまざまな形式のネットワーク図を柔軟に描画して、データ間の関係や接続を示すことができます。この記事がハイチャートでネットワーク図を描くのに役立つことを願っています。

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