Question

我有一个类似下面的龙卷风图表： 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

我一直坚持这一点，因为阴影条只显示相对于第一个图表（29.5）的baseValue，而不是第二个图表的baseValue（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

Answer 1

如果你想让0 / origin的点位于系列其余部分的不同位置 - 那么你应该使用不同的系列并添加隐藏的另一个水平轴（在你的代码中，由于bar导致的反转，它将是y轴图表）。要同步这些轴，您可以在轴上设置适当的最大值和最小值。示例：http://jsfiddle.net/frgo4Lun/3/

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

您还在刻度线之间张贴了系列图片。您可以将点的x位置设置为不是1.5的舍入值。示例：http://jsfiddle.net/frgo4Lun/5/

如何在我的高图中添加另一个系列

1 个答案: