gpt4 book ai didi

javascript - 异步钻取不更新 HighCharts

转载 作者:行者123 更新时间:2023-12-03 00:27:51 24 4
gpt4 key购买 nike

我正在努力动态更新 HighCharts 堆栈条形图及其钻取图表,但我坚持一个问题,即异步钻取未更新。

In my scenario series data is completely dynamic and also corresponding drilldown columns.

还有一个小问题,因为钻取系列的 color:null ,每个时间序列颜色都不同,而且因为它是动态的,所以我无法设置静态颜色,有什么方法可以使颜色相同就像简单柱形图的默认配色方案

这是可重现的问题 JSFiddle

我使用了以下方法(第二种方法已在 JSFiddle 中注释)

First method use chart.update API
Second method use chart.options.merge API

// Create the chart
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {

var chart = this,
drilldowns = {
'Animals': {
type: 'column',
name: 'Animals',
data: [2, 3],
color: null
},
'Fruits': {
type: 'column',
name: 'Fruits',
data: [7, 3],
color: null
}
};
const series = [];
series.push(drilldowns['Animals']);
series.push(drilldowns['Fruits']);
series.forEach(serie => {
chart.addSingleSeriesAsDrilldown(e.point, serie);
});
chart.applyDrilldown();

}

},
drillup: function() {
var newOptions = {
legend: {
enabled: true
}
};
this.update(newOptions);
}
}
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},

legend: {
enabled: false
},

plotOptions: {
column: {
stacking: 'normal'
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},

series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}]
});


$('#update').click(function() {
// First Method
chart.update({
drilldown: {
series: [{
name: 'Animals2',
data: [1, 5],
color: null,
type: 'column'
}, {
name: 'Fruits2',
data: [3, 5],
color: null,
type: 'column'
}]
}
});

// Second Method

/* chart.options.drilldown = Highcharts.merge(chart.options.drilldown, {
series: [{
name: 'Animals2',
data: [1, 5],
color: null,
type: 'column'
}, {
name: 'Fruits2',
data: [3, 5],
color: null,
type: 'column'
}]
}); */
});

最佳答案

您可以为深入系列动态设置颜色:

                series.forEach(function(serie, i) {
serie.color = chart.options.colors[i];
chart.addSingleSeriesAsDrilldown(e.point, serie);
});

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

关于javascript - 异步钻取不更新 HighCharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53996427/

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