我只是想将列放在他们的xAxis上,无论如何要做到这一点?这是我的高级代码
它看起来总是在刻度线上开始,我只想显示2个刻度之间的列。
Highcharts.chart('YearNS', {
chart: {
width: 1200,
height: 450,
type: 'column',
events: {
click: function (e) {
console.log(e.type, this.name);
},
}
},
exporting: {
enabled: false
},
title: {
text: 'This Year NS vs Last 4 Years'
},
subtitle: {
text: 'Click the columns to view the breakdown by Term. Click again to view by Program. Updated as of ' + MyUpdateDate
},
credits: {
enabled: false
},
xAxis: {
min: 0,
max: 4,
categories: categories
},
yAxis: {
title: {
text: "Number of Students"
}
},
legend: {
enabled: true,
align: 'center',
layout: 'horizontal',
verticalAlign: 'top',
floating: false,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
plotOptions: {
series: {
point: {
events: {
click: function () {
ParamYear = this.category
var res = ParamYear.substring(0, 4);
// let urlParams = new URLSearchParams('=');
window.location = "http://localhost:37590/NewStudentReportTerm?ParYear=" + res
}
}
},
borderWidth: 1,
pointWidth: 150,
dataLabels: {
//inside: true,
overflow: 'none',
crop: false,
enabled: true,
format: '{point.y:,.0f}',
style: {
textShadow: false,
textOutline: false,
color: 'black'
},
}
},
column: {
events: {
}
},
},
series: series,
drilldown: {
series: {
chartDrilldownData
}
}
});
我希望列出现在每年中心的这些行之间。这甚至可能吗?
谢谢!编辑
这是我的Json数据。
[
{
"New_Students": "321",
"NSYEAR": "2014",
"NSterm": null,
"NStermCat": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "1923",
"NSYEAR": "2015",
"NSterm": null,
"NStermCat": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "293",
"NSYEAR": "2016",
"NSterm": null,
"NStermCat": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "29",
"NSYEAR": "2017",
"NSterm": null,
"NStermCat": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
},
{
"New_Students": "524",
"NSYEAR": "2018",
"NSterm": null,
"NStermCat": null,
"NSCareer": null,
"NSProgDescr": null,
"NSStudent": null
}
]
您需要为grouping
系列禁用column
选项:
plotOptions: {
column: {
grouping: false
}
}
现场演示:http://jsfiddle.net/BlackLabel/ow8vkq1f/
API参考:https://api.highcharts.com/highcharts/plotOptions.column.grouping