Highcharts - 具有通用代码和独特数据和标题的全局配置

Question

我正在使用 Highcharts。

在单页中，我有多个Area具有不同数据和标题以及相同图表属性配置的图表。

在线演示

由图1改为图2、图3如下：

• 系列名称
• 系列数据
• 传奇
• 工具提示数据

除了上面的，其他都一样...

如何避免为#chart-1, #chart-2, #chart-3等等编写重复代码并仅配置以上元素？

HTML：

<div id="chart-1" style="height: 200px; width: 500px"></div>
<div id="chart-2" style="height: 200px; width: 500px"></div>
<div id="chart-3" style="height: 200px; width: 500px"></div>

全局初始化：

jQuery(function () {

    Highcharts.setOptions({
        colors: ['#fe5758', '#99cc03', '#33b5e6'],
        chart: {
            style: {
                fontFamily: 'Roboto Light',
                fontWeight: 'normal',
                fontSize: '12px',
                color: '#585858',
            }
        },      
        title: { text: null },
        subtitle: { text:null },
        credits: { enabled: false },
        exporting: { enabled: false },
......

图一：

$(function () {
    $('#chart-1').highcharts({
        chart: {
          type: 'area'
        },
        xAxis: {
            ....

图2：

$(function () {
    $('#chart-2').highcharts({
        chart: {
          type: 'area'
        },
        xAxis: {
            ....

Answer 1

您可以为常见的选项创建一个变量，例如：

var commonOptions = {
    chart: {
        type: 'area'
    },
    // ...
};

然后合并每个图表的特定选项，如下所示：

$('#container').highcharts(Highcharts.merge(commonOptions, {
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
    // ...
}));

请参阅此 JSFiddle 示例，其中包含图例、工具提示和系列选项。