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

我用的是海图

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

区域
图表


从图1更改为图2，图3如下：


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

除了以上，其他一切都是一样的

如何避免为
#图表1、#图表2、#图表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: {
            ....

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

图1：

<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: {
            ....

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

图2：

<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: {
            ....

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

您可以为公共选项创建一个变量，如：

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

请参见图例、工具提示和系列选项。
如何创建类似于
createChart
的函数？传递变量？像这样：

@海沃斯特兰德酒店。。。嘿，天才，像魅力一样工作：）嗯。。不确定您所说的
图例是什么意思，但您当然可以向函数添加更多参数，但如果可以，请保持简单。