ECharts ツリー図: データの階層構造を表示する方法-jsチュートリアル-php.cn

ECharts ツリー図: データの階層構造を表示する方法

PHPz

リリース： 2023-12-17 15:24:48

オリジナル

888 人が閲覧しました

ECharts ツリー図: データの階層構造を表示する方法

ECharts ツリー図: データの階層構造を表示する方法、具体的なコード例が必要です

はじめに: データ視覚化の急速な発展により、人々の理解と分析能力が向上しました。データの改善も行われました。一般的に使用されるデータ視覚化手法として、ECharts ツリー図はデータの階層構造を直感的に表示できます。この記事では、ECharts ツリー図の基本的な使用法を紹介し、具体的なコード例を示します。

1. ECharts ツリーチャートの概要
ECharts は、Baidu によって開発された JavaScript ベースのフロントエンドチャートライブラリであり、さまざまなチャートやマップなどの豊富なデータ視覚化効果を提供できます。 ECharts ツリー図はその中核となる図の 1 つで、データの階層関係を表示するために使用され、組織構造や分類関係などのシナリオに適しています。

2. ECharts ツリー図の基本的な使い方

ECharts ライブラリの紹介
ECharts ツリー図を使用するには、まず HTML に ECharts ライブラリを導入する必要がありますファイル。これは、次のコードを通じて実現できます:
```
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.3/dist/echarts.min.js"></script>
```
ログイン後にコピー
コンテナの作成
HTML ファイルに樹形図を表示するためのコンテナを作成します。たとえば、:
```
<div id="tree-chart" style="width: 800px; height: 600px;"></div>
```
ログイン後にコピー
ECharts インスタンスの初期化
JavaScript ファイルで、次のコードを使用して ECharts インスタンスを作成し、コンテナーにバインドします:
```
var treeChart = echarts.init(document.getElementById('tree-chart'));
```
ログイン後にコピー
ツリーマップパラメーターの構成
ECharts 構成項目を通じてデータやスタイルなどのパラメーターを指定します。以下は簡単な例です。
```
var option = {
 series: [
     {
         type: 'tree',
         data: [
             {
                 name: 'A',
                 children: [
                     {
                         name: 'B',
                         children: [
                             { name: 'C' },
                             { name: 'D' }
                         ]
                     },
                     { name: 'E' }
                 ]
             }
         ]
     }
 ]
};
```
ログイン後にコピー
このうち、data パラメータはツリーマップのデータを指定するために使用されます。各ノードは name 属性と children 属性で構成され、name はノード名を表し、children は子ノードのコレクションを表します。
ツリーマップのレンダリング
最後に、ECharts インスタンスの setOption メソッドを呼び出し、構成項目パラメーターを渡すことによって、ツリーマップがレンダリングされます。ページ:
```
treeChart.setOption(option);
```
ログイン後にコピー

3. デモの例
単純な組織ツリー図を考えてみましょう、コードは次のとおりです:



    ECharts树图示例
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.3/dist/echarts.min.js"></script>



    <div id="tree-chart" style="width: 800px; height: 600px;"></div>
    <script>
        var treeChart = echarts.init(document.getElementById('tree-chart'));

        var option = {
            series: [
                {
                    type: 'tree',
                    data: [
                        {
                            name: 'CEO',
                            children: [
                                {
                                    name: 'CTO',
                                    children: [
                                        { name: 'Engineer' },
                                        { name: 'Designer' }
                                    ]
                                },
                                {
                                    name: 'CFO',
                                    children: [
                                        { name: 'Accountant' },
                                        { name: 'Treasury' }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        };

        treeChart.setOption(option);
    </script>

ログイン後にコピー

上記のコードでは、単純な組織構造ツリー図。ルートノードは CEO で、CTO と CFO の 2 つのサブノードが含まれています。CTO ノードの下には、エンジニアとデザイナーの 2 つのサブノードがあります。CFO ノードの下には、会計士と財務の 2 つのサブノードがあります。上記のコードにより、組織構造を示すツリー図を取得できます。

結論:
この記事では、ECharts ツリー図の基本的な使用法を紹介し、例を示します。 ECharts の構成項目を通じて、ツリーマップのデータとスタイルを柔軟に定義し、さまざまなシナリオでのデータレベルの表示要件を実現できます。この記事が読者の ECharts ツリー図の理解と使用に役立つことを願っています。

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