我的要求是显示多个具有公共x轴的图表。并且只为最后显示的图表启用x轴标签(因为它们是公共的)。
在小提琴https://jsfiddle.net/1dhLut64/中,我的代码在开始时创建了四个图表,即使只选择了一个图表(您可以看到updateCharts
方法被调用了四次)。我如何在第一次创建一个图表时,仅当它是可见的。即只有当我单击chart2复选框时,才应该创建chart2。这样我相信性能可以提高。谢谢。
更新方法如下:
// calls other functions, including updatecharts
setTimeout(chartLoaded, 0);
// To have xAxis label enabled for the last chart selected.
function updateCharts() {
console.log("updatecharts called")
const selected = Highcharts.charts.map(chart =>
document.querySelector(`#checkbox${chart.options.id}`).checked);
const checkedCheckboxes = selected.filter(x => x).length; // counts true values in selected
const lastSelected = selected.lastIndexOf(true); // the last index of true
Highcharts.charts.forEach(function(chart, i) {
chart.update({
chart: {
height: height / checkedCheckboxes
},
xAxis: {
labels: {
enabled: i === lastSelected
}
}
});
});
}
1条答案
按热度按时间qxsslcnc1#
例如,您可以将所有必需的图表信息存储在一个数组中:
仅在开始处创建第一个图表,然后选择创建下一个图表(如果不存在):
实时演示:https://jsfiddle.net/BlackLabel/xuf6293k/
**API参考:**api.highcharts.com/class-reference/Highcharts.Chart#Chart