以下實現(xiàn)的分段分類柱狀圖是根據(jù)每一輪實驗結(jié)果將N個不同的策略結(jié)果輸出，在最近的M輪次中觀察策略優(yōu)劣和變化趨勢。

demo

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'columnrange', // highcharts-more.js中定義的類型
            inverted: true  // x,y軸對調(diào)，arm0-arm9實際是x軸，只是展現(xiàn)的時候換了一下
        },

        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

除圖表外還要實現(xiàn)每個分段等寬，可以根據(jù)具體需求確定一個值。例如第一張圖中每根柱子表示概率，那么可以用1表示每段的寬度，例如arm0在第10輪概率0.38，第11輪0.58，實際在圖表中的值為0.38和1.58，以此實現(xiàn)分段。

一些文檔：
highcharts圖表高級篇