Значения по умолчанию для графиков Highcharts

Question

Мы используем Highcharts для графиков в веб-приложении панели инструментов. Мы создаем графические объекты в javaScript. Большинство графиков имеют похожие параметры. Например. один график создается примерно так:

Highcharts.chart('boiler-temp', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Boiler temperatures'
    },         
    legend: { 
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom'
    },
    yAxis: [{
        title: {
            text: 'Inner temperature'
        }
    }, {
        title: {
            text: 'Outer temperature',
        },
        opposite: true,
        min: 0,
        max: 100
    }],
    data: {
        rowsURL: dataUrl,
    },
    series: [{
        yAxis: 0,
    }, {
        yAxis: 1,
    }],
    plotOptions: {
        series: {
        connectNulls: true
        }
    },
    exporting: {
        fallbackToExportServer: false
    }
}

Другой график создается очень похожим образом:

Highcharts.chart('boiler-temp', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Boiler pressure'
    },         
    legend: { 
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom'
    },
    yAxis: [{
        title: {
            text: 'Inner pressure'
        }
    }, {
        title: {
            text: 'Outer outer pressure',
        },
        opposite: true,
        min: 0,
        max: 100
    }],
    data: {
        rowsURL: dataUrl,
    },
    series: [{
        yAxis: 0,
    }, {
        yAxis: 1,
    }],
    plotOptions: {
        series: {
        connectNulls: true
        }
    },
    exporting: {
        fallbackToExportServer: false
    }
}

Для удобства обслуживания я хотел бы определить набор параметров по умолчанию как

{
    chart: {
        type: 'spline'
    },
    legend: { 
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom'
    },
    yAxis: [{
    }, {
        opposite: true,
        min: 0,
        max: 100
    }],
    series: [{
        yAxis: 0,
    }, {
        yAxis: 1,
    }],
    plotOptions: {
        series: {
        connectNulls: true
        }
    },
    exporting: {
        fallbackToExportServer: false
    }
}

и затем, когда я создаю экземпляр графика, перезаписываю то, что меняется. Есть ли способ сделать это с помощью Highcharts / JavaScript?

Answer 1

Это можно сделать, используя глобальные параметры Highcharts - набор параметров для всех графиков на одной странице.

Highcharts.setOptions({
  chart: {
    type: 'spline'
  },
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom'
  },
  yAxis: [{}, {
    opposite: true,
    min: 0,
    max: 100
  }],
  series: [{
    yAxis: 0,
  }, {
    yAxis: 1,
  }],
  plotOptions: {
    series: {
      connectNulls: true
    }
  },
  exporting: {
    fallbackToExportServer: false
  }
});

Демо:

• https://jsfiddle.net/BlackLabel/ugsfoyeh/

Docs:

• https://www.highcharts.com/docs/getting-started/how-to-set-options#2

---

Другой подход заключается в создании defaultOptions где-то в вашем приложении и объединении их с параметрами диаграммы с помощью, например. Highcharts.merge().

const defualtData = {
  chart: {
    type: 'spline'
  },
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom'
  },
  yAxis: [{}, {
    opposite: true,
    min: 0,
    max: 100
  }],
  series: [{
    yAxis: 0,
  }, {
    yAxis: 1,
  }],
  plotOptions: {
    series: {
      connectNulls: true
    }
  },
  exporting: {
    fallbackToExportServer: false
  }
};

Highcharts.chart('boiler-temp1', Highcharts.merge(defualtData, {
  title: {
    text: 'Boiler temperatures'
  }
}));

Демо-версия:

• https://jsfiddle.net/BlackLabel/5epm4hqc/

Ссылка API:

• https://api.highcharts.com/class-reference/Highcharts#.merge