When designing a data presentation page in a project, you want to design a double x axis, an axis to display the required items, and an axis to group the items, as shown in the figure:
Highcharts with dual x-axis display, but the effect is not too ideal, adjust it will be troublesome to see the highcharts on a block plug-in, grouped-categories.js, a little modification can achieve the desired effect, the code is as follows:
$ (function () {var chart = new Highcharts.chart ({chart: {renderto: "container", Typ
E: "Column"}, Title: {text:null}, Plotoptions: {column: { Stacking: ' Normal ', DataLabels: {enabled:false, color: (Hig Hcharts.theme && Highcharts.theme.dataLabelsColor) | | ' White '}}, series: [{name: ' new ', Colo
R: ' #FF3300 ', type: ' column ', Data: [4, 14, 18, 5, 6, 5, 14, 15, 18]},{ Name: ' Follow ', color: ' #009900 ', type: ' column ', Data: [4, 5, 6, 5, +, +]}, {name: ' Prepared ', color: ' #FFFF33 ', type: ' column ', Data: [4, 14, 18, 5, 6, 5, 14, [+]}], Xaxis: {categories: [{Name: "2011", Categorie
s: ["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