長方形ツリー図を使用して ECharts のデータ構造を表示する方法-jsチュートリアル-php.cn

長方形ツリー図を使用して ECharts のデータ構造を表示する方法

王林

リリース： 2023-12-18 13:44:54

オリジナル

1251 人が閲覧しました

長方形ツリー図を使用して ECharts のデータ構造を表示する方法

長方形ツリーダイアグラムを使用して ECharts でデータ構造を表示する方法

長方形ツリーダイアグラムは、データ構造間の関係を明確に表示できる、一般的に使用されるデータ視覚化方法です。階層関係を示し、各ノードの重要性を強調することができます。この記事では、ECharts ライブラリの長方形ツリー図コンポーネントを使用してデータ構造を表示する方法を紹介し、具体的なコード例を示します。

まず、表示するデータ構造を準備する必要があります。長方形のツリーマップは通常、ツリーデータ構造を使用して表現され、各ノードには一意の識別子とそれに関連付けられたデータが含まれます。この例では、単純な学生情報データ構造を構築します。各ノードは学生を表し、名前、年齢、成績の 3 つのフィールドが含まれています。以下はサンプルデータ構造です:

var data = {
  name: 'root',
  children: [
    {
      name: '张三',
      age: 18,
      score: 90
    },
    {
      name: '李四',
      age: 19,
      score: 95
    },
    // 更多学生节点...
  ]
};

ログイン後にコピー

データ構造を準備した後、ECharts ライブラリをページに導入し、長方形ツリーマップをホストするコンテナを作成する必要があります。以下は、簡単な HTML コードの例です。

<!DOCTYPE html>
<html>
<head>
  <title>矩形树图示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 800px; height: 600px;"></div>
  <script src="treechart.js"></script>
</body>
</html>

ログイン後にコピー

上記のコードでは、script タグを通じて ECharts ライブラリを導入し、ID chart の ID を作成しました。 div 要素は長方形のツリーマップをホストします。

次に、実際のコードを JavaScript ファイルに記述して、長方形のツリーマップを生成する必要があります。以下は完全なコード例です:

var myChart = echarts.init(document.getElementById('chart'));

var option = {
  series: [{
    type: 'treemap',
    label: {
      show: true,
      formatter: '{b}'
    },
    data: [data]
  }]
};

myChart.setOption(option);

ログイン後にコピー

上記のコードは、echarts.init メソッドを通じて ECharts インスタンスを初期化し、getOption を通じて長方形のツリーマップを取得します。メソッドの基本的な設定項目。構成アイテムの type 属性は、treemap 長方形ツリーマップコンポーネントの使用を示します。label 属性は、ノードラベルの表示モードを設定するために使用されます。 ##data プロパティは、データ構造を渡すために使用されます。

最後に、

setOption メソッドを通じて構成項目を ECharts インスタンスに適用し、長方形のツリーマップを生成します。コードを実行すると、ページ上に学生情報を示す長方形の樹形図が表示されます。

要約すると、ECharts の長方形ツリーマップコンポーネントを使用してデータ構造を表示するプロセスには、主にデータ構造の準備、ECharts ライブラリの導入、長方形ツリーマップをホストするコンテナの作成、生成するコードの作成が含まれます。長方形のツリーマップ構成アイテムを選択し、ECharts インスタンスに適用します。上記の手順により、ECharts を使用してさまざまな複雑なデータ構造を表示し、視覚的な分析を簡単に実行できます。

以上が長方形ツリー図を使用して ECharts のデータ構造を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。