gpt4 book ai didi

javascript - Highcharts 中的按月类别划分

转载 作者:行者123 更新时间:2023-12-03 01:06:52 24 4
gpt4 key购买 nike

我有一个使用 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 轴上显示每年的每个月。当我尝试时,似乎月份名称相同,即使它们属于不同的年份,它们也会在同一点上绘制。

下图显示了我需要它的确切方式。有什么方法可以做到吗?

Expected Behaviour

最佳答案

正如 @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;
}
});
}
}

现场演示:https://jsfiddle.net/BlackLabel/vnLy3pwq/

关于javascript - Highcharts 中的按月类别划分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52361581/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com