以下实现的分段分类柱状图是根据每一轮实验结果将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图表高级篇
