ホームページ > 記事 > ウェブフロントエンド > ECharts 多軸グラフ: 多次元データを表示する方法
ECharts 多軸グラフ: 多次元データを表示する方法
- WBOYオリジナル
- 2023-12-18 18:39:541860ブラウズ
ECharts 多軸チャート: 多次元データを表示する方法、具体的なコード例が必要です
はじめに:
ビッグデータ時代の到来に伴い複雑な多次元データをより効果的に表示する必要があります。 ECharts は強力な視覚化ライブラリとして、さまざまな種類のチャートを提供します。その中でも多軸チャートは、多次元データを表示するための重要なツールの 1 つです。この記事では、多軸グラフとは何か、ECharts を使用して多次元データを表示する方法を紹介し、対応するコード例を示します。
1. 多軸チャートとは
多軸チャートは、データ単位と大きさが異なる複数のデータ系列を同じチャート上に表示できるチャートです。データ系列ごとに 1 つずつ複数の軸を使用することで、さまざまな次元にわたってデータをより直感的に比較できます。
2. ECharts 多軸チャートの設定項目
多軸チャートを作成するには、ECharts のオプション オブジェクトに複数のプロパティを設定する必要があります。設定する必要がある主な設定項目は次のとおりです。
- tooltip 属性: データ シリーズの詳細情報を表示するために使用されます。たとえば、チャート上にマウスを置くと、データの特定の値が表示されます。
- legend 属性: 凡例、つまり、異なるデータ系列を区別するために使用されるグラフ内の色の識別を構成するために使用されます。
- xAxis および yAxis プロパティ: 複数の軸を構成するために使用されます。 xAxis は x 軸を構成し、yAxis は y 軸を構成します。複数の軸を配列形式で構成できます。
- series 属性: データ シリーズの構成に使用されます。各データ シリーズは 1 つの軸に対応しており、異なるデータ型とグラフ表示方法を使用できます。
3. コード例
以下では、特定のコード例を使用して、ECharts を使用して多次元データを表示する多軸グラフを作成する方法を示します。マーチャンダイジングの例から始めましょう。
- ECharts ライブラリと関連スタイル ファイルを紹介します:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-axis Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 400px;"></div>
</body>
</html>- 多軸グラフを作成し、関連するプロパティを構成します:
var chart = echarts.init(document.getElementById('chart'));
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['电视销量', '冰箱销量', '洗衣机销量']
},
xAxis: [
{
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月']
}
],
yAxis: [
{
type: 'value',
name: '销量'
},
{
type: 'value',
name: '销售额'
}
],
series: [
{
name: '电视销量',
type: 'bar',
data: [120, 200, 150, 80, 70]
},
{
name: '冰箱销量',
type: 'bar',
data: [80, 100, 120, 150, 110]
},
{
name: '洗衣机销量',
type: 'line',
yAxisIndex: 1,
data: [1000, 1500, 2000, 1800, 1600]
}
]
};
chart.setOption(option); 上記のコードでは、テレビの売上、冷蔵庫の売上、洗濯機の売上という 3 つのデータ シリーズを設定しました。このうち、テレビと冷蔵庫の売上は棒グラフ、洗濯機の売上は折れ線グラフで表示されます。販売量と売上高は、異なる y 軸を使用して表示されます。
4. まとめ
ECharts は、多次元データを簡単に表示できる多軸グラフの機能を提供します。適切な設定項目を設定することで、美しく直感的な多軸グラフを作成できます。この記事のサンプル コードを通じて、ECharts を使用して多軸グラフを描画し、それを独自のプロジェクトに適用することをすぐに開始できます。
参考リンク:
[ECharts公式ドキュメント](https://echarts.apache.org/zh/index.html)
以上がECharts 多軸グラフ: 多次元データを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。