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)，请参阅文档：this

但是，我建议在呈现图表之前合并选项。像这样的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()。

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

1 个答案: