我有一个使用 Highcharts 的应用程序。下面的 Fiddle 显示了代码示例。
Highcharts.chart('container-main-bar', {
chart: {
type: 'line',
events: {
drilldown: function(e) {
},
drillup: function (e) {
}
},
},
exporting: { enabled: true },
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category',
labels: {
formatter () {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
yAxis: {
title: {
text: 'Sales'
},
allowDecimals: false,
labels: {
formatter () {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
},
"series": [
{
"name": "Australia",
"data": [
{
"name": "Jan",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
},
{
"name": "Feb",
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
},
{
"name": "Mar",
"y": 50,
"color": '#ff910c',
"drilldown": 'Year3',
},
{
"name": "Apr",
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
},
{
"name": "May",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year1',
},
{
"name": "Jun",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jul",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Aug",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Sep",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Oct",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Nov",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Dec",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jan",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Feb",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Mar",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Apr",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "May",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jun",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jul",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Aug",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Sep",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Oct",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Nov",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Dec",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jan",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Feb",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Mar",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Apr",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "May",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jun",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jul",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Aug",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Sep",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Oct",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Nov",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Dec",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
}
]
}
]
});
https://jsfiddle.net/yasirunilan/Lwbmauks/7/
我想要的是展示每年几个月的销售分布情况。如果我按 3 年进行销售分布，它应该在 X 轴上显示每年的每个月。当我尝试时，似乎月份名称相同，即使它们属于不同的年份，它们也会在同一点上绘制。
下图显示了我需要它的确切方式。有什么方法可以做到吗？
最佳答案
正如 @Core972 所注意到的，您应该使用“分组类别”插件。您可以根据现有类别创建新格式的类别并以这种方式更新轴:
render: function() {
if (redrawEnabled) {
var xAxis = this.xAxis[0],
categories = xAxis.names,
year = 2015,
months = [],
newCategories = [];
Highcharts.each(categories, function(name, i) {
months.push(name);
if (name === 'Dec') {
newCategories.push({
name: year,
categories: months.slice()
});
year++;
months.length = 0;
}
if (i === categories.length - 1) {
redrawEnabled = false;
xAxis.update({
categories: newCategories
});
redrawEnabled = true;
}
});
}
}
关于javascript - Highcharts 中的按月类别划分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52361581/