为多个高图创建默认选项

Question

我的页面上有多个图表。我想看看是否有一种方法可以创建默认选项供我重复使用，这样我就不必继续编写冗余代码了。

代码：

图表#1

Highcharts.chart('chart1', {
                    chart: {
                        height: 257.5,
                        type: 'spline'
                    },
                    colors: [
                        '#42d4f4', 
                        '#e6194B', 
                        '#3cb44b', 
                        '#911eb4', 
                        '#800000', 
                        '#808000'
                    ],
                    title: {
                        text: ''
                    },
                    credits: {
                        enabled: false
                    },
                    tooltip: {
                        formatter: function() {

                            let date_format = (filters.group_by == 'day') ? moment(this.key).format('MMM DD, YYYY') : moment(this.key).format('MMM YYYY');
                            let metric_val = c.includes(this.series.name) ? this.y : d.includes(this.series.name) ? (this.y).toFixed(2) : this.y;
                            let tooltip = `<b><span style="color:#73879C">${this.series.name}</span></b><br /><br />
                            <i>${date_format}</i><br />
                            <span class="pull-right" style="font-weight:bold;">${metric_val}</span>`;
                            return tooltip;
                        },
                        useHTML: true
                    },
                    xAxis: {
                        type: 'datetime',
                        dateTimeLabelFormats: {
                            day: '%d. %b',
                            month: '%b&#39;%y',
                            year: '%Y'
                        }
                    },
                    yAxis: [{
                        lineWidth: 1,
                        title: {
                            text: 'Axis 1'
                        }
                    }, {
                        lineWidth: 1,
                        opposite: true,
                        title: {
                            text: 'A'xis 2
                        }
                    }],
                    plotOptions: {
                        series: {
                            turboThreshold: 1000000
                        },
                        spline: {
                            marker: {
                                enabled: false,
                                symbol: 'circle'
                            }
                        }
                    },
                    series: [series1, series2, series3, series4, series7, series8]
                });

图表#2

                Highcharts.chart('chart2', {
                    chart: {
                        height: 257.5,
                        type: 'spline'
                    },
                    colors: [
                        '#aaffc3',
                        '#f58231',
                        '#4363d8',
                        '#000075',
                        '#fabebe',
                        '#ffd8b1',
                        '#f032e6',
                        '#e6beff'
                    ],
                    title: {
                        text: ''
                    },
                    credits: {
                        enabled: false
                    },
                    tooltip: {
                        formatter: function() {

                            let date_format = (filters.group_by == 'day') ? moment(this.key).format('MMM DD, YYYY') : moment(this.key).format('MMM YYYY');
                            let metric_val = c.includes(this.series.name) ? this.y : d.includes(this.series.name) ? (this.y).toFixed(2) : this.y;
                            let tooltip = `<b><span style="color:#73879C">${this.series.name}</span></b><br /><br />
                            <i>${date_format}</i><br />
                            <span class="pull-right" style="font-weight:bold;">${metric_val}</span>`;
                            return tooltip;
                        },
                        useHTML: true
                    },
                    xAxis: {
                        type: 'datetime',
                        dateTimeLabelFormats: {
                            day: '%d. %b',
                            month: '%b&#39;%y',
                            year: '%Y'
                        }
                    },
                    yAxis: [{
                        lineWidth: 1,
                        opposite: true,
                        title: {
                            text: 'Axis 1'
                        }
                    }, {
                        lineWidth: 1,
                        title: {
                            text: 'Axis 2'
                        }
                    }],
                    plotOptions: {
                        series: {
                            turboThreshold: 1000000
                        },
                        spline: {
                            marker: {
                                enabled: false,
                                symbol: 'circle'
                            }
                        }
                    },
                    series: [series5, series6, series9, series10, series11, series12, series13, series14]
                });

很多选项都是重复的，可以重复使用。无论如何要创建一个变量来保存 chart, title, credits, tooltip, xAxis and plotOptions 之类的选项，以便稍后在其余图表中重复使用？

Answer 1

使用默认选项创建一个变量，并在创建另一个变量时传播它。

const defaultOptions = {
  chart: {
    height: 257.5,
    type: 'spline'
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  // ...
}

const options = {
  ...defaultOptions,
  // other options follow
}

console.log(options);

为多个高图创建默认选项

Create Default options for multiple highcharts

javascript

jquery

highcharts

refactoring

spline