javascript - 如何使用 Highcharts 制作 Tornado 图表

Question

我正在尝试使用 Highcharts 中的柱形图准备 Tornado 图表。 Here is my fiddle .

我当前的代码是:

$('#container').highcharts({

    chart: {
        type: 'columnrange',
        inverted: true
    },

    title: {
        text: 'Net Sales'
    },

    subtitle: {
        text: 'MM $'
    },

    xAxis: {
        categories: ['Annual Revenue', 'Number of Years', 'Annual Costs']
    },

    yAxis: {
        title: {
            text: 'MM $'
        }
    },


    plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.y;
                }
            }
        },
        scatter:{
            marker:{
                symbol:'line',
                lineWidth:11,
                radius:8,
                lineColor:'#f00'
            }
        }
    },

    legend: {
        enabled: false
    },

    series: [{
        name: 'Temperatures',
        data: [
            [12.15, 46.86],
            [15.45, 42.28],
            [27.77, 31.24]
        ]
    },
    {
        name:'Base',type: 'scatter',data:[120],
    }]

});

问题是最后一个系列(年度成本)没有显示，因为它的顺序相反。另外，我希望 Tornado Chart 看起来更像这样:

请注意，此图表中的标签与绘制的实际值不同。另请注意中间的横条 - 在示例代码中，29.5 处会有一条垂直线。我还想支持像底部那样的组合不确定性条。任何建议将不胜感激。

Answer 1

您的最后一个球棒没有显示，因为第一个数字小于第二个数字，请参阅:http://jsfiddle.net/kErPt/1/

如果您想在标签上显示其他值，请先添加该信息。示例:

data: [{
    low: 12,
    high: 15,
    lowLabel: 35,
    highLabel: 46
}, {
    low: 2,
    high: 35,
    lowLabel: 15,
    highLabel: 26
} ... ]

然后使用 dataLabels.formatter 进行序列化。

要添加垂直线，请使用 plotLines .

我不确定最后一个称为“组合不确定性”的条是什么。