如何在创建图表/对象后更新/添加高图表选项/属性?

Question

我想在一个页面上显示三个几乎相同的不同图表。因此，我想使用一个通用函数来创建/初始化相同的基本图表，然后为每个单独的图表添加选项。怎么做？

$(document).ready(function () {    
var initBaseChart = function(dchartId, data) {
var chart = Highcharts.chart(chartId, {
chart: {
type: 'column',                     
events: {   
selection: function(event) { ... }
}
}
...
}
return chart;
}
var chart1 = initBaseChart('chart1ID', someData);
var chart2 = initBaseChart('chart2ID', otherData);
// Add Options to show data labels ==> Does NOT work...
chart1.options.plotOptions.column.dataLabels.enabled = true;
chart1.options.plotOptions.column.dataLabels.format = '{point.y:.1f}%';
// Add event handlers
chart2.events.... // does not exist...
});    

那么：如何创建一个具有常用选项的图表，然后添加自定义选项？

Answer 1

使用chart.update(newOptions)，请参阅文档：https://api.highcharts.com/class-reference/Highcharts.Chart#update

但是，我建议在渲染图表之前合并选项。像这样的东西initBaseChart('chart1ID', someData, additionalOptions)和：

var initBaseChart = function(dchartId, data, additionalOptions) {
var options = {
chart: {
type: 'column',                     
events: {   
selection: function(event) { ... }
}
}
...
};
options = merge(options, additionalOptions);
return Highcharts.chart(chartId, options);
}

其中merge是合并两个选项的函数。例如$.extend()、angular.copy()或Object.assign()。