Question

我正在尝试使用 Highcharts 中的柱形图准备龙卷风图表。 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看起来更像这样： Sample Tornado

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

我使用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;
}

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

3 个答案: