箱ひげ図を使用して ECharts でデータ分布を表示する方法-jsチュートリアル-php.cn

箱ひげ図を使用して ECharts でデータ分布を表示する方法

王林

リリース： 2023-12-17 08:54:31

オリジナル

1539 人が閲覧しました

箱ひげ図を使用して ECharts でデータ分布を表示する方法

はじめに:
データ分析と視覚化は、現代のデータサイエンスにおいて非常に重要なリンクです。データ分析プロセスでは、データの特性や傾向をより深く理解するために、データの分布を視覚化する必要があることがよくあります。箱ひげ図は、データの統計的特性や外れ値などの重要な情報を明確に表示できる、一般的に使用される視覚化方法です。この記事では、箱ひげ図を使用して ECharts でデータ分布を表示する方法と、具体的なコード例を紹介します。

1. ECharts の概要:
ECharts は、Baidu によって開発され、JavaScript で書かれたオープンソースのデータ視覚化ライブラリです。 ECharts は、さまざまなデータ視覚化のニーズを簡単に実現できる豊富なチャートタイプとインタラクティブな機能を提供します。この記事では、ECharts を使用して箱ひげ図を描画します。

2. データの準備:
データ分布を表示する前に、一連のデータを準備する必要があります。以下はサンプルデータで、合計 100 個のサンプルポイントがあります:

var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 
            150, 160, 170, 180, 190, 200, 250, 260, 270, 280, 
            300, 320, 340, 360, 380, 400, 450, 460, 470, 480, 
            500, 520, 540, 560, 580, 600, 650, 660, 670, 680, 
            700, 720, 740, 760, 780, 800, 850, 860, 870, 880, 
            900, 920, 940, 960, 980, 1000, 1050, 1060, 1070, 1080, 
            1100, 1120, 1140, 1160, 1180, 1200, 1250, 1260, 1270, 1280, 
            1300, 1320, 1340, 1360, 1380, 1400, 1450, 1460, 1470, 1480, 
            1500, 1520, 1540, 1560, 1580, 1600, 1650, 1660, 1670, 1680, 
            1700, 1720, 1740, 1760, 1780, 1800, 1850, 1860, 1870, 1880];

ログイン後にコピー

3. 箱ひげ図を描画します:
箱ひげ図を描くには、EChart の箱ひげ図シリーズを使用する必要があります。以下は、ECharts 構成項目のサンプルコードです。

var option = {
    dataset: [{
        dimensions: ['value'],
        source: data
    }],
    grid: {
        left: '10%',
        right: '10%',
        top: '15%',
        bottom: '10%'
    },
    xAxis: [{
        type: 'category',
        boundaryGap: true,
        data: ['']
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        max: 2000,
        axisLabel: {
            formatter: '{value}'
        }
    }],
    series: [{
        type: 'boxplot',
        tooltip: {
            formatter: function (params) {
                return [
                    '最大值：' + params.data[5],
                    '上四分位数：' + params.data[4],
                    '中位数：' + params.data[3],
                    '下四分位数：' + params.data[2],
                    '最小值：' + params.data[1]
                ].join('<br/>');
            }
        }
    }]
};

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

ログイン後にコピー

上記のコードの data 配列は、前に準備したサンプルデータです。データを source に入力すると、そのデータをグラフに渡してプロットすることができます。設定項目の

xAxis

と yAxis は、それぞれ X 軸と Y 軸のスタイルと範囲を設定するために使用されます。実際のニーズに応じて調整できます。

series

の type は「boxplot」に設定されています。これは、箱ひげ図を描画することを意味します。 tooltipこの関数は、マウスホバー時のプロンプト情報を設定するために使用されます。最後に、

echarts.init

を使用してグラフを初期化し、グラフを HTML ページの指定されたコンテナに関連付けます。 4. 効果の表示:

上記の設定項目とコードにより、ECharts で箱ひげ図を描画できます。グラフを HTML Web ページに埋め込むと、準備したデータ分布を表示できます。

結論:

この記事では、箱ひげ図を使用して ECharts でデータ分布を表示する方法を紹介します。 ECharts の箱ひげ図を通じて、データの統計的特性を直観的に理解し、データ分析と意思決定をより適切に行うことができます。この記事が、データ視覚化に箱ひげ図を使用する際に役立つことを願っています。

参考文献: