ホームページ > 記事 > ウェブフロントエンド > 箱ひげ図を使用して ECharts でデータ分布を表示する方法
箱ひげ図を使用して 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
に入力すると、そのデータをグラフに渡してプロットすることができます。設定項目の
と yAxis
は、それぞれ X 軸と Y 軸のスタイルと範囲を設定するために使用されます。実際のニーズに応じて調整できます。
の type
は「boxplot」に設定されています。これは、箱ひげ図を描画することを意味します。 tooltip
この関数は、マウスホバー時のプロンプト情報を設定するために使用されます。 最後に、
を使用してグラフを初期化し、グラフを HTML ページの指定されたコンテナに関連付けます。 4. 効果の表示:
結論:
参考文献:
以上が箱ひげ図を使用して ECharts でデータ分布を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。