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

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

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

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

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

1. ECharts ライブラリの紹介
   ECharts ツリー図を使用するには、まず HTML に ECharts ライブラリを導入する必要がありますファイル。これは、次のコードを通じて実現できます:

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

2. コンテナの作成
   HTML ファイルに樹形図を表示するためのコンテナを作成します。たとえば、:

   <div id="tree-chart" style="width: 800px; height: 600px;"></div>

3. ECharts インスタンスの初期化
   JavaScript ファイルで、次のコードを使用して ECharts インスタンスを作成し、コンテナーにバインドします:

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

4. ツリー マップ パラメーターの構成
   ECharts 構成項目を通じてデータやスタイルなどのパラメーターを指定します。以下は簡単な例です。

   var option = {
    series: [
        {
            type: 'tree',
            data: [
                {
                    name: 'A',
                    children: [
                        {
                            name: 'B',
                            children: [
                                { name: 'C' },
                                { name: 'D' }
                            ]
                        },
                        { name: 'E' }
                    ]
                }
            ]
        }
    ]
   };

   このうち、data パラメータはツリー マップのデータを指定するために使用されます。各ノードは name 属性と children 属性で構成され、name はノード名を表し、children は子ノードのコレクションを表します。

5. ツリー マップのレンダリング
   最後に、ECharts インスタンスの setOption メソッドを呼び出し、構成項目パラメーターを渡すことによって、ツリー マップがレンダリングされます。ページ:

   treeChart.setOption(option);

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

    
    <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 サイトの他の関連記事を参照してください。