Question

我正在使用Highcharts。

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

Online Demo

从图表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 },
......

图表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。

Answer 2

如何创建像createChart这样的功能？并传递变量？像这样：http://jsfiddle.net/0s2pkps0/2/

newChart('#chart-1', 'Date', 'Count', series_1);
newChart('#chart-2', 'Weekly report', 'Total views', series_2);

function newChart(container, xAxisTitle, yAxisTitle, series) {
  $(container).highcharts({
    chart: {
      type: 'area'
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%eth %b'
      },
      title: {
        text: xAxisTitle,
      }
    },

    yAxis: {
      title: {
        text: yAxisTitle
      },
    },
    series: series
  });
}

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

2 个答案: