2014-10-10 55 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

相关问题