負と中性のスタックを持つバー

Question

「はい/いいえ/わからない」という回答を表示したいと思います。私は、負のスタックを持つBarと同じようなことを考えていましたが、中間の中立部分としてゼロの両側に等しい幅を持つ「分からない」と考えました。私が何を意味するかを示すために、標準のフィドルに2つのニュートラルシリーズを追加しました。どのようにしてそれらを真ん中の1つのニュートラルシリーズにマージできますか？

{ 
     name: 'Neutral', 
     data: [...] 
} 

多分私は完全に間違ったトラックです。助言がありますか？

modified Bar with negative stack-fiddle

Answer 1

あなたは（棒グラフのように見えるように）反転されcolumnrangeシリーズでこれを行うことができるかもしれません。これにはhighcharts-more.jsライブラリも必要です。 各質問（x）、低い値（low）、高い値（high）、そして望む色（color）のインデックスを設定する必要があります。

Highcharts.chart('container', { 
    chart: { 
    type: 'columnrange', 
    inverted: true 
    }, 
    xAxis: { 
    categories: ['Q1', 'Q2'] 
    }, 
    legend: { 
    enabled: false 
    }, 
    series: [{ 
    name: 'Answers', 
    data: [ 
    // Question 1 
     { 
     x: 0, 
     low: -10, 
     high: -5, 
     color: 'red' 
     }, { 
     x: 0, 
     low: -5, 
     high: 5, 
     color: 'blue' 
     }, { 
     x: 0, 
     low: 5, 
     high: 10, 
     color: 'green' 
     }, 
     // Question 2 
     { 
     x: 1, 
     low: -15, 
     high: -2, 
     color: 'red' 
     }, { 
     x: 1, 
     low: -2, 
     high: 8, 
     color: 'blue' 
     }, { 
     x: 1, 
     low: 8, 
     high: 20, 
     color: 'green' 
     } 
    ] 
    }] 

}); 

サンプルjsFiddle。