javascript - Highcharts:如何对共享某些配置部分的图表进行 DRY？

Question

我有用 Highcharts 库制作的树状不同图表。他们共享一些配置代码，我想尊重 DRY 原则，并将不同的部分与公共(public)部分分开。不幸的是我不知道必要的 JavaScript 技巧。代码示例如下；所有图表的 xAxis 配置和其他部分都相同，但 yAxis 不同。

(function($) { // encapsulate jQuery
// some stuff here
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'graphContainer',
        },
        title: {
            text: ultimoAggiornamento
        },
        subtitle: {
            text: 'Passo di campionamento di 15 minuti'
        },
        legend: {enabled: false},
        xAxis: {
            title: {
                text: 'Muovere il cursore sul grafico per visualizzare i valori'
            },
            offset: 5,
            tickInterval: 21600000,
            dateTimeLabelFormats: {minute: '%H:%M', day: '%H:%M'},
            max: endRange,
            type: 'datetime',
            plotBands: [{// Light air
                    from: firstDay,
                    to: secondDay,
                    color: 'rgba(255, 216, 216, 0.2)',
                    label: {
                        text: firstDayLabel,
                        style: {
                            color: 'black',
                            fontWeight: 'bold'
                        }
                    }
                }, {// Light breeze
                    from: secondDay,
                    to: endRange,
                    color: 'rgba(222, 222, 255, 0.2)',
                    label: {
                        text: secondDayLabel,
                        style: {
                            color: 'black',
                            fontWeight: 'bold'
                        }
                    }
                }]
        },
        yAxis: {...},
        tooltip: {
            borderColor: 'blue',
            xDateFormat: '%d/%m/%Y, %H:%M',
            style: {
                fontSize: '12px',
                fontWeight: 'bold'
            },
            valueDecimals: 1,
            shared: true
        },
        plotOptions: {...},
        credits: {
            enabled: false
        },
        //other stuff here
    });

});

})(jQuery);

我唯一能想到的就是创建一个通用图表，然后使用其方法放入不同的部分，例如以下代码片段:

chart.yAxis[0].addPlotLine({
     value: alarmThreshold,
                width: 1,
                color: 'red',
            });

无论如何，我更喜欢动态图表创建，如下所示:

yAxis: evaluateYaxisForChartType_2(),

但我缺少必要的 javascript 知识。是否可以 ？又如何？

Answer 1

使用 setOptions 函数并传入您想要为 highcharts 全局设置的选项的 javascript 对象。然后，您制作的每个图表都将使用这些选项。就这么简单。

例如:

Highcharts.setOptions({
    legend: { layout: 'vertical', align: 'right', width: 200 }
});

现在每个图表都将具有图例样式。