When you design a data presentation page in a project. To design a double x-axis, an axis displays the required items. The items are grouped by an axis. Effect
- Highcharts comes with dual x-axis display mode. But the effect is not too ideal. It'll be a little tricky to adjust.
- See there is a grouping plugin on the highcharts. Grouped-categories.js. You can achieve the desired effect with a little change, such as the following code:
$ (function () {var chart = new Highcharts.chart ({chart: {renderto: "container", type: " Column "}, Title: {text:null},plotoptions: {column: {Stacki ng: ' Normal ', DataLabels: {enabled:false, color: (highcharts.theme && Highcharts.theme.dataLabelsColor) | | ' White '}}, series: [{name: ' new ', Color: ' #F F3300 ', type: ' column ', Data: [4, +, 5, 6, 5, +,--]},{NA Me: ' Follow ', color: ' #009900 ', type: ' column ', Data: [4, 14, 18, 5, 6 , 5, +, +]}, {name: ' Prepared ', color: ' #FFFF33 ', Type: ' column ', Data: [4, +, 5, 6, 5, +, +]}], Xaxis: {categories: [{Name: "2011", Categories: ["One", "two", "Three"]}, { Name: "2012", Categories: ["One", "two", "Three"]}, {name: "2013", Categories: ["One", "two", "Three"]}]}});
This address: http://blog.csdn.net/yueritian/article/details/41309137
Highcharts:x Axis Group Stacking diagram