highcharts实现分段分类柱状图

以下实现的分段分类柱状图是根据每一轮实验结果将N个不同的策略结果输出，在最近的M轮次中观察策略优劣和变化趋势。

demo

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'columnrange', // highcharts-more.js中定义的类型
            inverted: true  // x,y轴对调，arm0-arm9实际是x轴，只是展现的时候换了一下
        },

        plotOptions: {
            columnrange: {
            grouping: false, // 默认是true，true的时候arm0的多个值不属于同一个轴，不会互相覆盖 http://api.highcharts.com/highcharts#plotOptions.column.grouping
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return this.y + '°C';
                    }
                }
            }
        },

title: {
            text: 'Temperature variation by month'
        },

        subtitle: {
            text: 'Observed in Vik i Sogn, Norway'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        yAxis: {
            title: {
                text: 'Temperature ( °C )'
            }
        },

        tooltip: {
            valueSuffix: '°C'
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            data: [
                [-9.7, 9.4]
            ]
        },
        {
            name: 'Temperatures',
            data: [
                [-15.2, -10.2]
            ]
        }
        ]

    });

});

在此运行代码：https://code.hcharts.cn/new

Paste_Image.png

除图表外还要实现每个分段等宽，可以根据具体需求确定一个值。例如第一张图中每根柱子表示概率，那么可以用1表示每段的宽度，例如arm0在第10轮概率0.38，第11轮0.58，实际在图表中的值为0.38和1.58，以此实现分段。

一些文档：
highcharts图表高级篇