ホームページ > 記事 > ウェブフロントエンド > 長方形ツリー図を使用して ECharts のデータ構造を表示する方法
長方形ツリー図を使用して ECharts のデータ構造を表示する方法
- 王林オリジナル
- 2023-12-18 13:44:541242ブラウズ
長方形ツリー ダイアグラムを使用して 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 のデータ構造を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。