Question

我们将Highcharts用于仪表板Web应用程序中的图形。我们正在使用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/

文档：

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

另一种方法是在应用程序中的某个位置创建defaultOptions，然后使用eg将其与图表选项合并。 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

Highcharts图的默认值

1 个答案: