Sankey Rose Chart を使用して ECharts でデータフローと比率の変化を表示する方法-jsチュートリアル-php.cn

Sankey Rose Chart を使用して ECharts でデータフローと比率の変化を表示する方法

WBOY

リリース： 2023-12-18 13:47:45

オリジナル

743 人が閲覧しました

Sankey Rose Chart を使用して ECharts でデータフローと比率の変化を表示する方法

ECharts は、データをより鮮明かつ直感的に表示できるビジュアルデータ表示ライブラリです。中でも、Sankey Rose チャートは、データフローの方向と割合の変化を示すのに非常に役立ちます。この記事では、具体的なコード例を示しながら、ECharts で Sankey Rose Chart を使用する方法を紹介します。

はじめに

サンキーローズチャートは、内円と外円、扇形の長さの同心円を通じてデータを明確な階層構造で表示する特別なローズチャートです。多次元データフローを表示します。 ECharts では、Sankey Rose Chart を使用して、さまざまな次元間の比率と、時間の経過に伴う比率間の関係を表示できます。さらに、データ量が多く、ディメンションが多すぎる場合、ECharts はユーザーの視覚的な対話を容易にするスクロール表示とサムネイルプレビューもサポートしています。

実装

以下では、ECharts で Sankey ローズチャートを使用して、初期化、データの設定、スタイルの設定など、データフローの方向と割合の変更を表示する方法を紹介します。インタラクティブエフェクト 4 ステップ待ちます。

2.1 初期化

初期化では、ECharts の js ファイルを導入し、新しいキャンバスコンテナを作成します。具体的なコードは次のとおりです。

<!-- 引入ECharts插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<!-- 定义画布容器 -->
<div id="sankey-rose" style="width: 800px;height: 600px;"></div>

ログイン後にコピー

2.2 データの設定

データの設定には、ノードとエッジの定義が含まれます。ノードはデータ内の特定の属性を指します。たとえば、販売データのサンキーローズ図では、ノードは製品タイプまたは販売地域になります。エッジは、データの論理関係を表す、異なるノード間の接続とフローの方向を指します。具体的なコードは次のとおりです。

// 设置节点
var data = {
    nodes: [
        {name: 'A'},
        {name: 'B'},
        {name: 'C'},
        {name: 'D'},
        {name: 'E'}
    ],
    // 设置边
    links: [
        {
            source: 'A',
            target: 'B',
            value: 10
        },
        {
            source: 'B',
            target: 'C',
            value: 20
        },
        {
            source: 'C',
            target: 'D',
            value: 30
        },
        {
            source: 'D',
            target: 'E',
            value: 40
        }
    ]
};

ログイン後にコピー

このうち、nodes にはすべてのノードが含まれており、各ノードはオブジェクトであり、name はノードの名前 (文字列) を表します。タイプ）。 links にはすべてのエッジが含まれており、各エッジはオブジェクトです。source はソースノードの名前を表し、target はターゲットノードの名前を表します。 value はデータ(数値型)の値を表します。

2.3 スタイルの設定

スタイルは、Sankey Rose ダイアグラムの全体的なスタイルとノード間の関連付けを指します。 ECharts では、

series を構成することでスタイルを実現できます。具体的なコードは次のとおりです。

// 设置样式
var option = {
    series: [{
        type: 'sankey',
        data: data.nodes,
        links: data.links,
        layoutIterations: 32,
        lineStyle: {
            color: 'source',
            curveness: 0.5
        },
        label: {
            color: '#000',
            formatter: '{b}'
        }
    }]
};

ログイン後にコピー

このうち、

type はチャートの種類を表し、data と links はそれぞれ以前に定義したグラフの種類に対応します。 ノードとリンク。 layoutIterations は、レイアウトの反復回数を表します。値が大きいほど、レイアウトの密度が高くなります。通常は 32 に設定されます。 lineStyle はエッジのスタイルを表し、color はエッジの色を表します。ここでは、ソースノードの色を使用するように設定されています。curveness は、エッジの円弧。曲線を表すために 0.5 に設定します。 labelはノードラベルのスタイルを表し、formatterはノードラベルの表示内容を表し、ここではノードの名前を使用するように設定されています。

2.4 インタラクティブ効果

インタラクティブ効果とは、ユーザーが Sankey Rose Chart を操作するときにトリガーされる効果と操作を指します。 ECharts では、

toolbox を構成することでインタラクティブな効果を実現できます。具体的なコードは次のとおりです。

// 设置交互效果
option.toolbox = {
    feature: {
        dataZoom: {},
        restore: {},
        saveAsImage: {}
    }
};

ログイン後にコピー

このうち、

feature は複数の対話型ツールを含むオブジェクトです。 dataZoom はズームツールを表し、restore は復元ツールを表し、saveAsImage は保存ツールを表します。これらのツールは、ユーザーがデータを切り替え、クエリし、エクスポートするのに役立ちます。

以下は最終的なコードです。以下は、サンキーローズチャートを使用して、さまざまな地域でのさまざまな種類の商品の売上比率を示す売上データの例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>桑基玫瑰图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="sankey-rose" style="width: 800px;height: 600px;"></div>
    <script>
        // 初始化
        var myChart = echarts.init(document.getElementById('sankey-rose'));

        // 设置数据
        var data = {
            nodes: [
                {name: '华东地区'},
                {name: '华南地区'},
                {name: '华北地区'},
                {name: '东北地区'},
                {name: '中西部地区'},
                {name: '电子产品'},
                {name: '家用电器'},
                {name: '食品饮料'},
                {name: '化妆品'},
                {name: '家居生活'}
            ],
            links: [
                {
                    source: '华东地区',
                    target: '电子产品',
                    value: 300
                },
                {
                    source: '华东地区',
                    target: '家用电器',
                    value: 200
                },
                {
                    source: '华东地区',
                    target: '食品饮料',
                    value: 100
                },
                {
                    source: '华南地区',
                    target: '化妆品',
                    value: 400
                },
                {
                    source: '华南地区',
                    target: '家居生活',
                    value: 500
                },
                {
                    source: '华北地区',
                    target: '电子产品',
                    value: 200
                },
                {
                    source: '华北地区',
                    target: '家用电器',
                    value: 150
                },
                {
                    source: '东北地区',
                    target: '家用电器',
                    value: 100
                },
                {
                    source: '东北地区',
                    target: '化妆品',
                    value: 50
                },
                {
                    source: '中西部地区',
                    target: '电子产品',
                    value: 120
                },
                {
                    source: '中西部地区',
                    target: '食品饮料',
                    value: 80
                },
                {
                    source: '中西部地区',
                    target: '家居生活',
                    value: 200
                }
            ]
        };

        // 设置样式
        var option = {
            series: [{
                type: 'sankey',
                data: data.nodes,
                links: data.links,
                layoutIterations: 32,
                lineStyle: {
                    color: 'source',
                    curveness: 0.5
                },
                label: {
                    color: '#000',
                    formatter: '{b}'
                }
            }]
        };

        // 设置交互效果
        option.toolbox = {
            feature: {
                dataZoom: {},
                restore: {},
                saveAsImage: {}
            }
        };

        // 渲染图表
        myChart.setOption(option);
    </script>
</body>
</html>

ログイン後にコピー

上記は、ECharts で Sankey ローズチャートを使用して、初期化、データの設定、データフローと比率変更のプロセス全体を表示する方法です。スタイルの設定、インタラクティブなエフェクトなどです。実際のアプリケーションでは、特定のニーズに応じて変更および拡張できます。この記事が、サンキーローズダイアグラムの使い方をよりよくマスターするのに役立つことを願っています。

以上がSankey Rose Chart を使用して ECharts でデータフローと比率の変化を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。