javascript - Highcharts - 具有通用代码和唯一数据和标题的全局配置

Question

我正在使用 Highcharts。

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

Online Demo

图一到图二、图三的变化如下:

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

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

如何避免为 #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 },
......

图表 1:

$(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]
    }]
    // ...
}));

参见 this JSFiddle example带有图例、工具提示和系列选项。