javascript - 如何将另一个系列添加到我的 Highcharts 中

Question

我有一个 Tornado 图表，如下所示: 该图表的基线为 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'
    }
}]  

我正在尝试添加第二个 Tornado 的阴影图，其中基线可能不同。例如，在如下所示的模型中考虑向右移动的另外四个条形:

我一直坚持这一点，因为阴影条仅显示相对于第一个图表的基值 (29.5)，而不是相对于第二个图表的基值 (39.5)。因此，如果我尝试将它们添加到现有系列中，只有当值方向相同时它们才会起作用(如 value-baseValue 与原始数据具有相同的符号)。

为了说明这一点，假设阴影图具有以下数据:

• 年收入:25、39.5、55
• 年数:33、39.5、48
• 年度费用:35、39.5、48
• 综合不确定性:23,43,55

如何将其添加到上面 fiddle 的代码中并使其看起来像模型？这是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'
    }
}]  

问题如下图所示:

Answer 1

如果您希望 0/原点位于系列其余部分的不同位置 - 那么您应该使用不同的系列并添加隐藏的另一个水平轴(在您的代码中，由于条形引起的反转，它将是 y 轴图表)。 要同步这些轴，您可以在轴上设置适当的最大值和最小值。 示例:http://jsfiddle.net/frgo4Lun/3/

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

您还发布了在刻度之间包含系列的图像。您可以将点的 x 位置设置为不舍入值(例如 1.5)。 示例:http://jsfiddle.net/frgo4Lun/5/