カレンダーチャートを使用して ECharts に時間データを表示する方法-jsチュートリアル-php.cn

カレンダーチャートを使用して ECharts に時間データを表示する方法

王林

リリース： 2023-12-18 08:52:06

オリジナル

1668 人が閲覧しました

カレンダーチャートを使用して ECharts に時間データを表示する方法

カレンダーグラフを使用して 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 を使用して、チャートの時間範囲を設定します。