如何使用高图表制作龙卷风图表

Question

我正在尝试使用高图表中的列图表来准备龙卷风图表。这是我的小提琴。

我目前的代码是：

$('#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

通常，这种图表是使用一个单独的系列来完成的，分别用于左、右两部分。

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

example

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

更新：

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

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

如果您不想拥有行标记类型的额外代码，则可以在分散序列中使用任何其他现有标记符号。

Answer 3

我使用了不同系列的高图表(谢谢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;
}