У меня есть старшая диаграмма в моем приложении, и я хочу показать, как продажи происходили в последние месяцы, и я хочу показать месяцы три года. ТАК Ось X должна быть что-то вроде следующего. Ранее у меня было требование показывать год как группу и месяцы каждого года в виде подгрупп, как показано на следующем рисунке. Сгруппированные категории
Я достиг этого через BlackLabel плагин. Но теперь я хочу проверить, можем ли мы иметь месяцы на XAxix без классификации по годам. Таким образом, в XAxix будут отображаться только месяцы. Так что это должно быть похоже на следующее второе изображение. Есть ли способ сделать это? Пример кода выглядит следующим образом.
Ожидаемый путь
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/Lwbmauks/32/