長方形のツリーマップを使用して ECharts でデータ階層を表示する方法

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

はじめに:
データ視覚化では、長方形ツリー図が非常に一般的です。データの階層構造を四角形で表示し、直感的にデータを理解・分析できるチャートタイプ。 ECharts は、さまざまな種類のチャートと柔軟な構成項目を提供する強力なデータ視覚化ライブラリであり、長方形ツリー図を簡単に表示できます。この記事では、長方形ツリー図を使用して ECharts のデータ階層構造を表示する方法を詳しく紹介し、具体的なコード例を示します。

1. 準備
開始する前に、ECharts がインストールされ、必要なリソース ファイルが導入されていることを確認する必要があります。具体的な手順は次のとおりです。

1. ECharts のダウンロード: ECharts 公式 Web サイト (http://echarts.apache.org/zh/index.html) にアクセスして、ECharts の最新バージョンをダウンロードします。圧縮されたパッケージ。
2. 圧縮パッケージを解凍します。ダウンロードした圧縮パッケージを解凍すると、echarts-x.x.x ディレクトリが得られます。
3. リソース ファイルの導入: echarts-x.x.x ディレクトリにある echarts.min.js ファイルをプロジェクト ディレクトリにコピーし、HTML ファイルにリソース ファイルを導入します。

2. 長方形ツリー ダイアグラムを作成する
ECharts で長方形ツリー ダイアグラムを作成するプロセスは、主に次の手順に分かれています:

1. コンテナを作成します。 HTML ファイル内に div コンテナを追加して、生成された長方形ツリー マップをホストします。たとえば、 タグ内に次のコードを追加できます:

div>

2. インスタンスの初期化: JavaScript ファイル内に ECharts インスタンスを作成し、指定されたコンテナーにバインドします。たとえば、<script> タグ内に次のコードを追加できます: </script>

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

#構成データ: 表示するデータを準備し、ニーズに応じて整理します。たとえば、データ オブジェクトは次のように定義できます:

var data = {

name: 'Root Node',
Children: [

{
  name: '子节点1',
  children: [
    { name: '子节点1.1' },
    { name: '子节点1.2' }
  ]
},
{
  name: '子节点2',
  children: [
    { name: '子节点2.1' },
    { name: '子节点2.2' }
  ]
}

]

};

構成オプション: レイアウト、スタイル、インタラクションなどを含む、長方形のツリーマップのさまざまなオプションを設定します。特定の構成項目については、ECharts の公式ドキュメント (http://echarts.apache.org/zh/option.html) を参照してください。たとえば、次のようにレイアウトを設定できます:

var option = {

series: {

type: 'treemap',
data: [data]

}

};

チャートをレンダリングする: ECharts インスタンスの setOption メソッドを呼び出すことにより、構成項目をチャートに適用し、長方形のツリー チャートをレンダリングします。たとえば、次のコードを追加できます:

chart.setOption(option);

3. サンプル コード

以下は、ECharts で表示するための完全なサンプル コードです。単純な長方形のツリーマップ:

< ;title>長方形ツリーマップの例

<script><br>var chart = echarts.init(document.getElementById ('chart' ));<br>var data = {<p> 名前: 'ルート ノード',<br> 子: [<br><pre class='brush:php;toolbar:false;'>{ name: '子节点1', children: [ { name: '子节点1.1' }, { name: '子节点1.2' } ] }, { name: '子节点2', children: [ { name: '子节点2.1' }, { name: '子节点2.2' } ] }</pre>]<p>};<br>var オプション= {<p> シリーズ: {<br><pre class='brush:php;toolbar:false;'>type: 'treemap', data: [data]</pre>}<p>};<br>chart.setOption(オプション);<p></script>


4. 概要

上記の手順により、ECharts で長方形のツリー図を簡単に作成して表示できます。基本的な設定項目に加えて、ECharts は特定のニーズに応じて調整および拡張できる豊富な機能と柔軟な対話方法も提供します。同時に、公式ドキュメントには、参照と学習のためのより詳細な手順と例も提供されています。この記事が、読者が長方形ツリー図の使用をすぐに開始し、データ階層を直感的に表示できるようにするのに役立つことを願っています。

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