ホームページ > 記事 > ウェブフロントエンド > ECharts ヒストグラム (多次元): データのグループ化と比較を表示する方法
ECharts ヒストグラム (多次元): データのグループ化と比較を表示する方法
- WBOYオリジナル
- 2023-12-18 12:52:271933ブラウズ
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 サイトの他の関連記事を参照してください。