ホームページ > ウェブフロントエンド > jsチュートリアル > 箱ひげ図を使用してハイチャートにデータを表示する方法

箱ひげ図を使用してハイチャートにデータを表示する方法

WBOY
リリース: 2023-12-18 17:06:56
オリジナル
1418 人が閲覧しました

箱ひげ図を使用してハイチャートにデータを表示する方法

箱ひげ図を使用してハイチャートにデータを表示するには、特定のコード例が必要です

箱ひげ図 (Boxplot) は、一般的に使用されるデータ視覚化手法です。分布を視覚的に表示します。データの。 Highcharts では、シンプルな構成とコード例を使用して、箱ひげ図を使用してデータを簡単に表示できます。

まず、データを準備する必要があります。箱ひげ図は通常、最小値、最大値、中央値、上位四分位、下位四分位などのデータ セットの統計的特性を表示するために使用されます。データ セットの例を次に示します。

var data = [
  [760, 800, 810, 830, 870],   // 数据集1
  [700, 720, 750, 780, 790],   // 数据集2
  [680, 690, 710, 715, 750]    // 数据集3
];
ログイン後にコピー

次に、Highcharts ライブラリの boxplot シリーズ タイプを使用して箱ひげ図を作成できます。 Highcharts の公式ドキュメントによると、箱ひげ図では x 軸と y 軸に異なるデータ形式が必要です。 #xx 軸のデータは各データセットを表し、y 軸のデータは各データセットの統計的特性を表します。

次は、ハイチャートで箱ひげ図を使用して上記のデータ セットを表示する方法を示す簡単なコード例です。

// 创建盒须图示例
Highcharts.chart('container', {
  chart: {
    type: 'boxplot'    // 设置图表类型为盒须图
  },
  title: {
    text: '数据集盒须图'    // 设置图表标题
  },
  xAxis: {
    categories: ['数据集1', '数据集2', '数据集3']    // 设置x轴数据
  },
  yAxis: {
    title: {
      text: '数据值'    // 设置y轴标题
    }
  },
  series: [{
    name: '数据集',    // 设置数据系列名称
    data: data    // 设置数据集
  }]
});
ログイン後にコピー

boxplot シリーズ タイプが使用されます。上記のコードでは、箱ひげ図を作成するには、グラフのタイトルと軸のタイトルを設定します。 xAxisyAxis を構成することで、x 軸と y 軸のデータを設定します。最後に、series 属性を通じて、データセットを箱ひげ図に渡します。

上記のコードを実行すると、HTML ページに箱ひげ図をレンダリングして、データ セットの統計的特性を示すことができます。同時に、Highcharts には豊富な構成オプションも用意されており、必要に応じてカスタマイズしたり、グラフのスタイルや色を設定したりできます。

要約すると、Highcharts ライブラリの

boxplot シリーズ タイプとシンプルな構成を通じて、箱ひげ図を簡単に作成してデータを表示し、直感的なデータ分布を提供できます。この記事が箱ひげ図の使用方法についての理解と実践的なガイダンスになれば幸いです。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート