Как обновить / добавить параметры / свойства Highchart после создания диаграммы / объекта?

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