ハイチャートを使用して箱ひげ図を作成する方法

Highcharts を使用して箱ひげ図を作成する方法

Highcharts は、箱ひげ図を含むさまざまなタイプのグラフの作成に使用できる、人気のある JavaScript グラフ作成ライブラリです。箱ひげ図は、データ セットの統計的分布を表示するために使用されるグラフです。データの中央値、上位四分位数、下位四分位数、最小値と最大値、および外れ値を表示できます。

以下では、Highcharts ライブラリを使用して箱ひげ図を作成する方法を紹介し、いくつかの具体的なコード例を示します。

最初のステップはデータを準備することです
まず、箱ひげ図に表示するデータを準備する必要があります。データは配列である必要があり、各要素は数値または一連の値を含む配列にすることができます。箱ひげ図は複数のデータセットの分布を比較するためによく使用されるため、複数のデータセットを準備できます。

たとえば、A、B、C という 3 つのデータ セットがあるとします。データは次のとおりです:

var dataSetA = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var dataSetB = [2, 4, 6 , 8、10、12、14、16、18、20];
var dataSetC = [5、10、15、20、25、30、35、40、45、50];

2 番目のステップはチャート コンテナを作成することです
次に、箱ひげ図を表示するために Web ページにコンテナを作成する必要があります。 div 要素をコンテナとして使用し、一意の ID を割り当てることができます。

例:

3 番目のステップでは、チャート パラメーターを構成します。
箱ひげ図 以前は、オブジェクトを通じてチャートのさまざまな構成パラメーターを定義する必要がありました。これらのパラメータには、グラフのタイプ、タイトル、X 軸と Y 軸のラベルなどが含まれます。

例:

var chartOptions = {
chart: {

type: 'boxplot',
renderTo: 'container'

},
title: {

text: 'Boxplot Example'

},
x 軸: {

categories: ['A', 'B', 'C'],
title: {
  text: 'Data Set'
}

},
y 軸: {

title: {
  text: 'Value'
}

},
シリーズ: [{

name: 'Data Set',
data: [dataSetA, dataSetB, dataSetC]

}]
};

4 番目のステップはチャートを作成することです
最後に、Highcharts ライブラリの Chart オブジェクトを使用して箱ひげ図を作成できます。構成パラメーターとデータを Chart オブジェクトのコンストラクターに渡すことによって、チャートを作成できます。

例:

var chart = new Highcharts.Chart(chartOptions);

上記の手順を完了すると、Web ページにデータ セットが表示されます。 A、B と C の箱ひげ図。

上記は、ハイチャートを使用して箱ひげ図を作成するための基本的な手順とコード例です。必要に応じてチャートの表示をさらに調整および最適化できます。Highcharts ライブラリには、使用できる多くの構成オプションと API メソッドが用意されています。この記事がお役に立てば幸いです。Highcharts を使用した箱ひげ図の作成がうまくいくことを祈っています。

以上がハイチャートを使用して箱ひげ図を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。