Highchart.jsは、可変長の入力が

Question

動作しません。この入力はhighchartsでうまく動作します：

data1 = [[2, 3, 3.5, 4], [1, 1.5, 2, 3]] 

しかし、これはしません：

data2 = [[2, 3, 3.5, 4, 4.5], [1, 1.5, 2, 3]] 

ここでの唯一の違いは、最初にということですアイテムには、もう1つのデータポイントがあります。ハイチャートはなぜそれからボックスプロットを作れないのですか？私は、中央値、四分位数、最小値、最大値などのボックスプロットを生成するために必要なのは、すべて2番目のデータセットにもあると思います。

これは私のコードです：

dt = [ 
    [760, 801, 848, 895, 930], 
    [733, 853, 939, 980, 1080], 
    [714, 762, 817, 870, 918], 
    [724, 802, 806, 871, 950], 
    [834, 836, 864, 882, 910] 
]; 


Highcharts.chart('boxcontainer', { 

    chart: { 
    type: 'boxplot' 
    }, 

    title: { 
    text: 'Highcharts box plot styling' 
    }, 

    legend: { 
    enabled: false 
    }, 

    xAxis: { 
    categories: ['1', '2', '3', '4', '5'], 
    title: { 
     text: 'Experiment No.' 
    } 
    }, 

    yAxis: { 
    title: { 
     text: 'Observations' 
    } 
    }, 

    plotOptions: { 
    boxplot: { 
     fillColor: '#F0F0E0', 
     lineWidth: 2, 
     medianColor: '#0C5DA5', 
     medianWidth: 3, 
     stemColor: '#A63400', 
     stemDashStyle: 'dot', 
     stemWidth: 1, 
     whiskerColor: '#3D9200', 
     whiskerLength: '20%', 
     whiskerWidth: 3 
    } 
    }, 

    series: [{ 
    name: 'Observations', 
    data: dt 
    }] 

}); 

どのように私はこの問題を解決することができますか？

Answer 1

Highchartsそれが上の単一の点をプロットする複数の値を必要とする箱ひげ図のようなグラフになる特に2つのフォーマットオブジェクト

の

1. 配列番号
2. の配列の入力データを受け付けこれらのアプローチのグラフは、必要なものを達成するのに役立ちます。

   ここにBoxplotの2つの方法があります。 1. 6または5の値を持つ配列の配列。この場合、値が高く、X、低い、Q1、中央値、Q3に対応

   data: [ 
       [0, 3, 0, 10, 3, 5], 
       [1, 7, 8, 7, 2, 9], 
       [2, 6, 9, 5, 1, 3] 
   ] 
   

3. 名前付きの値を持つオブジェクトの配列。

   data: [{ 
   x: 1, 
   low: 4, 
   q1: 9, 
   median: 9, 
   q3: 1, 
   high: 10, 
   name: "Point2", 
   color: "#00FF00"},{ 
   x: 1, 
   low: 5, 
   q1: 7, 
   median: 3, 
   q3: 6, 
   high: 2, 
   name: "Point1", 
   color: "#FF00FF"}] 
   

だから最初のアプローチでは、余分な値が歪んでいる、アレイに表示されますので、あなたのグラフであるとき。

プロットには必要ないが重要なデータに余分な値を追加したい場合は、2番目の方法を使用できます。ここで

ご参照のためのリンクです： API：https://api.highcharts.com/highcharts/series.boxplot.data Exaample：http://jsfiddle.net/fzwu1ods/