ハイチャートの同じチャートに複数の列をプロットする

Question

複数の列グラフを同じグラフにプロットしようとしています。 This is an example of desired output.

各色の列セグメントは、指定された月の終わりまでに所定のレベルに達したチームの割合を表します。したがって、4つの別々の縦棒グラフが積み上げられているようです。私はこれがグループ化され積み重なったものとは違うと思うが、間違いかもしれない。

フィードバックありがとうございます。

Answer 1

これは、スタックされた列範囲と列範囲の組み合わせで実行できます。これにはいくつかの注意点があり、yAxisのカテゴリを持たなければならないので、シリーズのデータ​​値をどのように設定するかによっていくつかの不安が生じます。私は1つの方法を選択し、他にもあると確信しています。私は最初'columnrange'にグラフの種類を設定したんでした：

chart: { 
    type: 'columnrange' 
}, 

その後、私はカテゴリを使用するyAxisプロパティを設定：カテゴリのオフセットので

yAxis: { 
    categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'], 

することで、間の目盛りであります私はそれらを削除し、ダニにならないために開始位置を設定する軸の：

startOnTick: false, 
    min: .5, 
    gridLineWidth: 0, 

アップ次の私はの書式を設定する必要があります（基本的にちょうど最初のラベルを隠す）：

labels: { 
    formatter: function() { 
     var label = this.axis.defaultLabelFormatter.call(this); 
     if (!this.isFirst) { 
     return label; 
     } 
    } 
    }, 

今、私は最後の「ターゲット」を示すために、異なる色でグリッド線を模倣するplotLinesを作成します。

plotLines: [{ 
    color: '#e6e6e6', 
    width: 1, 
    value: 1 
    }, { 
    color: '#e6e6e6', 
    width: 1, 
    value: 2 
    }, { 
    color: 'red', 
    width: 2, 
    value: 3, 
    label: { 
     text: 'Target' 
    } 
    }] 

今、私のセットアップこのグラフのplotOptionsstackingパラメータはcolumnrangeタイプの一部としてAPIに表示されていないことに注意してくださいが、（V5.0を使用して、この答えのように）それはまだ機能：ほとんどが、

plotOptions: { 
    columnrange: { 
    stacking: true 
    } 
}, 

わかりました。

series: [{ 
    name: 's1', 
    data: [ 
    [0, .64], 
    [0, .9], 
    [0, 1] 
    ] 
}, { 
    name: 's2', 
    data: [ 
    [null, null], 
    [1, 1.1], 
    [1.0, 1.5] 
    ] 
}, { 
    name: 's3', 
    data: [ 
    [null, null], 
    [null, null], 
    [2.0, 2.5] 
    ] 
}] 

データ値の重要な部分は、各「レベル」はレベル1は、0から1までであり、レベル2は1から2であることが全体ような整数であることである：私は、一連のデータを設定しますレベル3は2〜3です。これは、毎月の各レベルのパーセンテージを一様に増分しているので、あなたのパーセンテージを判断しようとするときに効果的です。

私はあなたが仕様を書いていないので、ツールチップを変更しませんでした。

サンプルjsFiddleとフルコード：

$(function() { 
    Highcharts.chart('container', { 
    chart: { 
     type: 'columnrange' 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    yAxis: { 
     categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'], 
     startOnTick: false, 
     min: .5, 
     gridLineWidth: 0, 
     title: { 
     text: null 
     }, 
     labels: { 
     formatter: function() { 
      var label = this.axis.defaultLabelFormatter.call(this); 
      if (!this.isFirst) { 
      return label; 
      } 
     } 
     }, 
     plotLines: [{ 
     color: '#e6e6e6', 
     width: 1, 
     value: 1 
     }, { 
     color: '#e6e6e6', 
     width: 1, 
     value: 2 
     }, { 
     color: 'red', 
     width: 2, 
     value: 3, 
     label: { 
      text: 'Target' 
     } 
     }] 
    }, 
    plotOptions: { 
     columnrange: { 
     stacking: true 
     } 
    }, 
    legend: { 
     enabled: true 
    }, 
    series: [{ 
     name: 's1', 
     data: [ 
     [0, .64], 
     [0, .9], 
     [0, 1] 
     ] 
    }, { 
     name: 's2', 
     data: [ 
     [null, null], 
     [1, 1.1], 
     [1.0, 1.5] 
     ] 
    }, { 
     name: 's3', 
     data: [ 
     [null, null], 
     [null, null], 
     [2.0, 2.5] 
     ] 
    }] 
    }); 
});