Javascript 创建图表/对象后，如何更新/添加Highchart选项/属性？

我想在一个页面上显示三个几乎相同的不同图表。因此，我想使用一个公共函数来创建/初始化相同的基本图表，然后为每个图表添加选项。如何做到这一点

$(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...

});    

那么：如何使用常用选项创建图表，然后添加自定义选项？

使用

图表。更新（新选项）

，请参阅文档：

但是，我建议在呈现图表之前合并选项。类似这样的

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（）

使用

图表。更新（新选项）

，请参阅文档：

但是，我建议在呈现图表之前合并选项。类似这样的

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（）