2014-10-10 19 views
0

我有一個類似於下圖的龍捲風圖表: Tornado Chart 此圖表的基線爲29.5,它的爲fiddle is here如何添加另一個系列到我的高圖

series:[{ 
    name: 'Low', 
    grouping:false, 
    type:'bar',   
    data:[ 
     {y:12.15-baseValue, label:10}, 
     {y:15.45-baseValue, label:1}, 
     {y:31.25-baseValue, label:2}, 
     {y:12.15-baseValue, color:'#99CCFF', label: ""}, 
    ], 
    labels:[10,5,1,2,] 
},{ 
    name: 'High', 
    grouping:false, 
    type:'bar', 
      data:[ 
      {y:46.86-baseValue, label:30}, 
      {y:42.28-baseValue, label:3}, 
      {y:27.77-baseValue, label:4}, 
      {y:46.86-baseValue, color:'#99CCFF', label:""}, 
      ], 
    labels:[30,10,3,4,] 
}, 
{ 
    name: 'Median', 
    type: 'scatter', 
    data: [ 
      null, 
      null, 
      null, 
      27-baseValue 
      ], 
    marker: { 
     lineWidth: 2, 
     lineColor: Highcharts.getOptions().colors[3], 
     fillColor: 'white' 
    } 
}] 

我想添加第二個龍捲風的陰影圖表,其中基線可以是不同的。例如,考慮四個多條,右移,按照下圖所示樣機

enter image description here

我一直停留在這一點,因爲陰影條只顯示相對於第一圖表的baseValue (29.5),而不是第二個圖表(39.5)的基準值。因此,如果我嘗試將它們添加到現有系列中,它們將只在值處於相同方向時起作用(如value-baseValue與原始數據具有相同符號)。

爲了說明,假設陰影圖表具有以下數據:

  • 年收入:25,39.5,55
  • 數年的:33,39.5,48項
  • 年度成本:35, 39.5℃,48
  • 合成不確定度:23,43,55

如何在上面的小提琴內容添加到代碼,使它看起來像實體模型?這是一個不起作用的modified fiddle

series:[{ 
    name: 'Low', 
    grouping:false, 
    type:'bar',   
    data:[ 
     {y:12.15-baseValue, label:10}, 
     {y:25-baseValue, label:50}, 
     {y:15.45-baseValue, label:1}, 
     {y:33-baseValue, label:20}, 
     {y:31.25-baseValue, label:2}, 
     {y:48-baseValue, label:8}, 
     {y:12.15-baseValue, color:'#99CCFF', label: ""}, 
     {y:40-baseValue, color:'#99DDDD', label: ""} 
    ], 
    labels:[10,50,1,20,2,8] 
},{ 
    name: 'High', 
    grouping:false, 
    type:'bar', 
      data:[ 
      {y:46.86-baseValue, label:30}, 
      {y:55-baseValue, label:70}, 
      {y:42.28-baseValue, label:3}, 
      {y:48-baseValue, label:30}, 
      {y:27.77-baseValue, label:4}, 
      {y:35-baseValue, label:5}, 
      {y:46.86-baseValue, color:'#99CCFF', label:""}, 
      {y:80-baseValue, color:'#99DDDD', label: ""} 
      ], 
    labels:[30,70,3,30,4,5,] 
}, 
{ 
    name: 'Median', 
    type: 'scatter', 
    data: [ 
      null, 
      null, 
      null, 
      null, 
      null, 
      null, 
      27-baseValue, 
      60-baseValue 
      ], 
    marker: { 
     lineWidth: 2, 
     lineColor: Highcharts.getOptions().colors[3], 
     fillColor: 'white' 
    } 
}] 

的問題是在下面的圖片註釋: enter image description here

回答

2

如果你想有不同的立場,即一系列的休息0 /原點 - 然後,而不是你應該使用不同的系列,並添加隱藏另一個水平軸(在你的代碼中,它將是Y軸,因爲由條形圖引起的反轉)。 要同步這些軸,您可以在軸上設置適當的最大值和最小值。 例子:http://jsfiddle.net/frgo4Lun/3/

OR 可以使用thresholdhttp://api.highcharts.com/highcharts#plotOptions.bar.threshold。 示例:http://jsfiddle.net/frgo4Lun/4/

您還發布了一系列圖片,其中包括一系列圖片。您可以將點的x位置設置爲不像1.5的值。 例如:http://jsfiddle.net/frgo4Lun/5/

+0

非常感謝,Kacper! – 2014-10-20 22:09:19

相關問題