ホームページ > 記事 > ウェブフロントエンド > カレンダー チャートを使用して ECharts に時間データを表示する方法
カレンダー チャートを使用して ECharts に時間データを表示する方法
- 王林オリジナル
- 2023-12-18 08:52:061628ブラウズ
カレンダー グラフを使用して ECharts に時間データを表示する方法
ECharts (Baidu のオープン ソース JavaScript グラフ ライブラリ) は、強力で使いやすいデータ視覚化ツールです。 。折れ線グラフ、棒グラフ、円グラフなど、さまざまな種類のグラフが提供されています。カレンダー チャートは、ECharts の非常に特徴的で実用的なチャート タイプであり、時間関連のデータを表示するために使用できます。この記事では、ECharts でカレンダー チャートを使用する方法を紹介し、具体的なコード例を示します。
まず、ECharts ライブラリを使用して、グラフを表示するコンテナを作成する必要があります。簡単な HTML ファイルの例を次に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 日历图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 100%; height: 600px;"></div>
<script>
// 在这里编写JavaScript代码
</script>
</body>
</html>次に、カレンダー グラフに表示するデータを準備する必要があります。データにはタイムスタンプと対応する値が含まれている必要があります。以下はサンプル データ セットです:
var data = [
{time: "2022-01-01", value: 10},
{time: "2022-01-02", value: 20},
{time: "2022-01-03", value: 15},
// 其他数据...
];次に、JavaScript コード部分で次の手順を実行してカレンダー グラフを描画する必要があります:
- ECharts インスタンスを作成し、チャート コンテナを指定します:
var chart = echarts.init(document.getElementById('chart'));- カレンダー チャートの基本パラメータ (タイトル、軸など) を構成します:
var option = {
title: {
text: '时间数据的日历图示例',
left: 'center'
},
tooltip: {},
calendar: {
left: 'center',
top: 'middle',
orient: 'horizontal',
cellSize: [30, 30],
range: ['2022-01-01', '2022-12-31']
},
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
data: data
}]
};上記の例たとえば、カレンダー チャートのタイトルを「時間データのカレンダー チャートの例」に設定し、カレンダー チャートを中央に配置します。各日付グリッドのサイズを制御するには、cellSize を [30, 30] に設定します。 range を使用して、チャートの時間範囲を設定します。
- 設定項目をグラフに適用します:
chart.setOption(option);
最後に、HTML ファイルを開くだけで、描画されたカレンダー グラフが表示されます。
要約すると、ECharts のカレンダー チャートを使用して時間データを表示するのは非常に簡単です。データを準備し、上記の手順に従ってグラフを構成してレンダリングするだけです。もちろん、必要に応じてグラフの表示効果やスタイルを調整することもできます。
注: 上記の例はデモのみを目的としており、完全なデータ セットや完全なコードを提供するものではありません。実際のアプリケーションでは、必要に応じて対応する変更を行ってください。
この記事が、カレンダー チャートを使用して ECharts に時間データを表示する方法を理解するのに役立つことを願っています。
以上がカレンダー チャートを使用して ECharts に時間データを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。