ECharts ヒストグラム (多次元): データのグループ化と比較を表示する方法-jsチュートリアル-php.cn

ECharts ヒストグラム (多次元): データのグループ化と比較を表示する方法

WBOY

リリース： 2023-12-18 12:52:27

オリジナル

1953 人が閲覧しました

ECharts ヒストグラム (多次元): データのグループ化と比較を表示する方法

ECharts ヒストグラム (多次元): データのグループ化と比較を表示する方法。具体的なコード例が必要です。

ECharts は、JavaScript に基づくオープンソースの視覚化ライブラリであり、さまざまな種類のデータグラフを表示します。ヒストグラムは、さまざまなグループまたはカテゴリ内のデータのグループ化と比較を表示するために使用できる一般的なデータ視覚化方法です。この記事では、ECharts の多次元ヒストグラム機能を使用してデータのグループ化と比較を表示する方法を詳しく紹介し、読者の参考となる具体的なコード例を示します。

1. ECharts 多次元ヒストグラムの概要

多次元ヒストグラムは、複数のデータ指標を同時に表示できるチャートであり、棒グラフ、バーチャートとも呼ばれます。チャートまたはヒストグラム。これは、さまざまなグループまたはカテゴリ内のデータのグループ化と比較を表示するために使用でき、複数のディメンションを含むデータセットを表示するのに適しています。たとえば、会社の売上を表示する場合、さまざまな製品ラインの売上、さまざまな販売地域の売上、その他の次元を多次元縦棒グラフで同時に表示して、さまざまなデータ間の関係をすばやく比較できます。

ECharts の多次元ヒストグラムは、異なるヒストグラムグループとして同じ次元の異なる値、または異なるヒストグラムグループとして異なる次元の組み合わせなど、さまざまな異なる次元の組み合わせをサポートしています。次元の組み合わせが決定したら、さまざまな色、色のグラデーション、ヒストグラム間のギャップ、ヒストグラムの幅などに従って各ヒストグラムグループをカスタマイズし、さまざまなニーズに適応できます。

2. ECharts 多次元ヒストグラムの使用方法

データの準備

ECharts 多次元ヒストグラムを使用してデータを表示する前に、次のことを行う必要があります。まずデータを準備します。データの形式は ECharts で指定された形式に準拠する必要があります。具体的な形式の要件は公式ドキュメントで確認できます。以下は例です:

let data = [
   {product: 'A', area: 'Shanghai', sales: 800},
   {product: 'B', area: 'Shanghai', sales: 1200},
   {product: 'A', area: 'Beijing', sales: 1000},
   {product: 'B', area: 'Beijing', sales: 1400},
];

ログイン後にコピー

上記のデータには、製品ライン、販売地域、売上の 3 つの次元のデータが含まれています。

ECharts パラメーターの構成

データを準備した後、ECharts パラメーターを構成する必要があります。 ECharts は、多次元ヒストグラム用の特別なパラメータ設定メソッドを提供しており、具体的なパラメータの説明は公式ドキュメントで参照できます。以下に例を示します。

let option = {
   xAxis: {
       type: 'category',
       data: ['Shanghai', 'Beijing']
   },
   yAxis: {
       type: 'value'
   },
   series: [
       {
           type: 'bar',
           name: 'Product A',
           data: [800, 1000]
       },
       {
           type: 'bar',
           name: 'Product B',
           data: [1200, 1400]
       }
   ]
};

ログイン後にコピー

上記のコードでは、x 軸は販売地域ディメンションを表し、y 軸は販売ディメンションを表します。シリーズ配列には、製品 A と製品 B の売上データである 2 つのヒストグラムグループが定義されています。

ECharts チャートのレンダリング

ECharts パラメーターの構成が完了したら、ECharts が提供する API を介してパラメーターを HTML ページ内の DOM 要素にバインドして、特定のグラフを生成できます。ヒストグラム。以下に例を示します。

let chart = echarts.init(document.getElementById('chart_container'));
chart.setOption(option);

ログイン後にコピー

上記のコードでは、「chart_container」は HTML ページ内の DIV 要素の ID 値で、生成されたヒストグラムを保存するために使用されます。 echarts.init() メソッドは ECharts インスタンスの初期化に使用され、setOption() メソッドはインスタンスのパラメータの設定に使用されます。

3. コード例

以下は、ECharts の多次元ヒストグラムを使用してデータのグループ化と比較を表示する方法を示す簡単なコード例です。このコードは、2 セットの販売データ、つまり、さまざまな製品ラインと販売地域の販売データを示しています。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>ECharts多维柱状图示例</title>
</head>
<body>
   <div id="chart_container" style="width: 600px; height: 400px;"></div>
   <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
   <script>
       // 准备数据
       let data = [
           {product: 'A', area: 'Shanghai', sales: 800},
           {product: 'B', area: 'Shanghai', sales: 1200},
           {product: 'A', area: 'Beijing', sales: 1000},
           {product: 'B', area: 'Beijing', sales: 1400},
       ];
       
       // 配置ECharts参数
       let option = {
           legend: {},
           tooltip: {},
           dataset: {
               dimensions: ['area', 'product', 'sales'],
               source: data
           },
           xAxis: {
               type: 'category',
               axisLabel: {
                   interval: 0,
                   rotate: 45
               }
           },
           yAxis: {},
           series: [
               {type: 'bar', seriesLayoutBy: 'row'},
               {type: 'bar', seriesLayoutBy: 'row'}
           ]
       };
       
       // 渲染ECharts图表
       let chart = echarts.init(document.getElementById('chart_container'));
       chart.setOption(option);
   </script>
</body>
</html>

ログイン後にコピー

上記のコード例では、凡例パラメータは凡例の位置とスタイルを構成するために使用され、ツールチップはマウスをホバーしたときのプロンプトボックスのスタイルを構成するために使用され、データセットパラメータは次の目的で使用されます。データセット形式を構成し、ディメンションを使用してデータを定義します。セットのディメンション順序、ソースはデータソースを指定するために使用されます。

xAxis パラメーターは x 軸のスタイルを構成するために使用され、axisLabel の間隔および回転属性は x 軸ラベルのテキスト表示モードを制御するために使用され、yAxis は x 軸のラベルを構成するために使用されます。 Y 軸のスタイル。

series はヒストグラムグループのスタイルを定義するために使用されます。type はグラフの種類を表し、seriesLayoutBy はデータ次元として行または列を使用する描画方法を表します。

上記のコード例を通じて、読者は ECharts の多次元ヒストグラムの使用法をより深く理解し、実際のアプリケーションでデータのグループ化と比較をより柔軟に表示できます。

以上がECharts ヒストグラム (多次元): データのグループ化と比較を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。