ECharts Sankey Rose Chart: データの流れと比率を表示する方法

ECharts Sankey Rose Chart: データ フローと割合を表示する方法、具体的なコード サンプルが必要です

ビッグ データ時代の到来により、データ分析と視覚化はますます重要になりました。重要なツールになります。 ECharts は強力な視覚化ライブラリとして、さまざまな種類のチャートを提供しており、その 1 つが Sankey Rose チャートです。 Sankey Rose ダイアグラムは、データ フローと比率の関係を多次元で表示するのに適しています。この記事では、Sankey Rose Chart の基本概念と使い方を紹介し、具体的なコード例を示します。

1. サンキー ローズ チャートの基本概念
   サンキー ローズ チャートは、異なる長さの半径によって異なる数値を表し、角度によって異なる次元を表す特別なレーダー チャートです。グラフの半径はデータの量を表し、各次元の角度はデータのカテゴリを表します。異なるディメンションを接続することで、データ間の流れや比率の関係を示すことができます。
2. Sankey Rose Chart のコード例
   以下は Sankey Rose Chart の簡単なコード例です:

// 引入ECharts
var echarts = require('echarts');

// 初始化图表
var myChart = echarts.init(document.getElementById('chart'));

// 数据示例
var data = [
  { source: 'A', target: 'B', value: 100 },
  { source: 'A', target: 'C', value: 200 },
  { source: 'B', target: 'C', value: 150 },
];

// 将数据格式转换为桑基玫瑰图需要的格式
var seriesData = data.map(item => {
  return {
    name: item.source,
    type: 'sankey',
    data: [
      { name: item.source },
      { name: item.target },
    ],
    links: [
      { source: item.source, target: item.target, value: item.value },
    ],
  };
});

// 配置项
var option = {
  tooltip: {},
  series: seriesData,
};

// 渲染图表
myChart.setOption(option);

上記のコードでは、最初に ECharts ライブラリを導入し、チャートインスタンスが初期化されます。次に、3 つのノードと 2 つのリレーションシップを含む単純なデータ例が定義されます。次に、データをサンキー ローズ ダイアグラムで必要な形式に変換します。ノードの name 属性はノード名を表し、links 属性はノード間の関係を表します。

最後に、構成アイテムを通じていくつかのスタイルとインタラクティブな動作を定義し、レンダリングのためにデータをチャート インスタンスに渡しました。ページ上では、div 要素の id によってチャートの位置を指定できます。

3. Sankey Rose Chart の使用シナリオ
   Sankey Rose Chart は、データの流れの方向や複数のディメンション間の比率関係を示すのに適しています。次のような多くの分野で広く使用されています:

• 貿易分野: 各国間の商品の流れと割合の表示;
• Web サイト訪問分析: 流れの表示異なるページ間のジャンプの割合;
• 財務フィールド: 異なる資産クラス間の取引の流れと割合を示します。

Sankey Rose Chart を通じて、データ間の関係を直感的に理解し、より適切な意思決定を行うことができます。

概要:
この記事では、ECharts Sankey Rose Chart の基本概念と使用法を紹介し、具体的なコード例を示します。 Sankey Rose ダイアグラムは、データ フローの方向と比例関係を表示するのに適しており、さまざまな長さの半径と角度を通じてデータの量と次元を表します。 ECharts ライブラリを使用すると、Sankey Rose Chart を簡単に実装し、さまざまなアプリケーション シナリオで使用できます。この記事がサンキーローズチャートの理解と使用に役立つことを願っています。

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