如何使用 Highcharts 制作龙卷风图

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],
    }]

});

问题在于最后一个系列（年度成本）没有显示，因为它的顺序相反。另外，我希望龙卷风图看起来更像这样：

请注意，此图表中的标签与绘制的实际值不同。另请注意，中心的条 - 在示例代码中，在 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。

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

Answer 2

我使用 Highcharts 和单独的系列（感谢 jlbriggs）来创建龙卷风图：http://jsfiddle.net/uRjBp/

    var baseValue = 29.5;
    var outputTitle = "Net Sales";
    var chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        //type:'column'
        //type:'area'
        //type:'scatter'
        //type:'bubble'
    },
    credits: {},
    exporting: {},
    legend: {},
    title: {
        text: outputTitle
    },
    subtitle: {
        text: "MM $"
    },
    tooltip: {
        formatter: function() {
            var msg = "";
            var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
            var low = round(this.series.chart.series[0].data[index].y+baseValue);
            var high = round(this.series.chart.series[1].data[index].y+baseValue);
            if (this.x === "Combined Uncertainty") {
                msg = "Combined Uncertainty in "+outputTitle+": "+low+" to "+high;
            } else {
                var lowLabel = this.series.chart.series[0].data[index].label;
                var highLabel = this.series.chart.series[1].data[index].label;
                msg = '<b>'+outputTitle+'</b> goes from '+ low +' to '+ high+'<br/> when '+this.x +
                    ' goes from <br/> '+lowLabel+" to "+highLabel;
            }
            return msg;
        }
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
                    if (this.series.userOptions.labels === undefined) {
                        return this.y+baseValue;
                    }
                    return this.key === "Combined Uncertainty" ? "":this.series.userOptions.labels[index];
                }
            }
        }
    },
    xAxis: {
        title: {
            text: 'Factor'
        },
        allowDecimals:false,
        categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty']
    },
    yAxis: {
        title: {
            text: 'MM $'
        },
        labels: {
            formatter:function() {
                return this.value+baseValue;
            }
        }
    },
    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,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,3,4,]
    },
    {
        name: 'Median',
        type: 'scatter',
        data: [null,null, null,27-baseValue],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }]      
});

function round(num) {
    return Math.round(num*100)/100;
}

Answer 3

通常，这种图表的左右部分使用单独的系列来完成

一种方法是将一组数据设置为负数，然后使用格式化程序使轴标签、数据标签和工具提示显示绝对值

example:

http://jsfiddle.net/jlbriggs/yPLVP/68/

更新：

要在原始图表中显示一条线，您可以扩展标记符号以包含线型，并使用散点系列来绘制该点：

http://jsfiddle.net/jlbriggs/yPLVP/69/

如果您不想为线标记类型添加额外代码，您可以使用散点系列的任何其他现有标记符号。