hightChart 实现x轴分组

在设计一个项目中的数据展示页面时。想要设计双X轴，一个轴显示须要的项。一个轴对这些项进行分组。效果如图：

• Highcharts自带双X轴展示方式。可是效果不是太理想。调整起来也会麻烦些
• 看到Highcharts上有一个分组插件。grouped-categories.js。稍做改动就可以实现想要的效果，代码例如以下：

$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column"
},
title: {
text: null
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: '新',
color: '#FF3300',
type: 'column',
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
},{
name: '循',
color: '#009900',
type: 'column',
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
}
,{
name: '备',
color: '#FFFF33',
type: 'column',
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
}],
xAxis: {
categories: [{
name: "2011年",
categories: ["一", "二", "三"]
}, {
name: "2012年",
categories: ["一", "二", "三"]
}, {
name: "2013年",
categories: ["一", "二", "三"]
}]
}
});
});

最后

以上就是着急白羊为你收集整理的hightChart 实现x轴分组的全部内容，希望文章能够帮你解决hightChart 实现x轴分组所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。