折れ線グラフを使用して ECharts でデータの傾向を表示する方法

折れ線グラフを使用して ECharts でデータ傾向を表示する方法

ECharts は、JavaScript をベースにしたオープンソースの視覚化ライブラリであり、さまざまな種類のデータ分析で広く使用されています。そしてビジュアルディスプレイプロジェクト。豊富なチャート タイプとインタラクティブな機能を提供し、データの表示をより直感的で理解しやすくします。この記事では、ECharts で折れ線グラフを使用してデータの傾向を表示する方法と、具体的なコード例を詳しく紹介します。

1. 準備作業

ECharts を使用して折れ線グラフを描画し始める前に、いくつかの準備作業を行う必要があります。まず、ECharts ライブラリ ファイルが導入されていることを確認してください。最新バージョンの ECharts を ECharts 公式 Web サイト (https://echarts.apache.org/) からダウンロードし、関連するスクリプト ファイルを HTML ページに導入できます。

<script src="echarts.min.js"></script>

同時に、ページにグラフを表示するには、ECharts グラフを収容するコンテナを準備する必要があります。 div 要素を HTML に追加し、その id 属性を設定できます。

<div id="myChart" style="width: 600px; height: 400px;"></div>

2. 折れ線グラフの描画

1. チャート インスタンスの初期化

var myChart = echarts.init(document.getElementById('myChart'));

2. チャート オプションの構成

var option = {
    title: {
        text: '数据趋势图'
    },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130]
    }]
};

グラフの構成オプションでは、グラフのタイトル、横軸と縦軸のスタイル、および特定のデータ系列を設定できます。この例では、横軸が曜日を示し、縦軸が対応する値を示す折れ線グラフを設定します。

3. レンダリング チャート

構成オプションをチャート インスタンスに渡し、setOption メソッドを呼び出してレンダリングします。

myChart.setOption(option);

このようにして、単純な折れ線グラフが描画されます。ブラウザで効果を確認できます。

3. 高度な構成

ECharts には多くの高度な構成オプションが用意されており、実際のニーズに応じてより詳細なカスタマイズを行うことができます。一般的に使用される高度な構成例をいくつか示します。

1. ポリライン スタイルを設定します

series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70, 110, 130],
    lineStyle: {
        color: 'red',
        width: 2,
        type: 'dotted'
    }
}]

この例では、ポリライン スタイルを赤に、線幅を 2px に設定します。線種は破線です。

2. データ マーカーの追加

series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70, 110, 130],
    symbol: 'circle',
    symbolSize: 6
}]

この例では、データ マーカーを追加し、マーカーの形状を円、サイズを 6 ピクセルに設定します。

3. アニメーション効果を追加

animation: true

animation を true に設定すると、グラフにプログレッシブ読み込みアニメーションを追加できます。効果。

4. 概要

この記事では、折れ線グラフを使用して ECharts のデータ傾向を表示する方法 (準備、グラフの描画、高度な構成など) を紹介します。適切にカスタマイズすると、実際のニーズに基づいてよりパーソナライズされた表示を作成できます。 ECharts には他のチャート タイプや豊富なインタラクティブ機能も用意されており、公式ドキュメントやサンプルを参照することでさらに学習し、習得することができます。

要約すると、ECharts は強力で使いやすいデータ視覚化ライブラリであり、データをより適切に表示し、そこからより深い洞察を得るのに役立ちます。この記事が、ECharts を使用して折れ線グラフを描画する際に役立つことを願っています。

以上が折れ線グラフを使用して ECharts でデータの傾向を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。