1. Highcharts 是通过 JavaScript 对象的形式（JSON）来定义图表的配置参数。

一、图表配置对象

当使用图表构造函数 Highcharts.Chart 来初始化图表时，图表的配置对象是以第二个参数传递给该构造函数的。

下面是示例代码（其中红色部分是配置对象）：

  1. var options = {
  2.     chart: {
  3.         type: 'bar'
  4.     },
  5.     title: {
  6.         text: 'Fruit Consumption'
  7.     },
  8.     xAxis: {
  9.         categories: ['Apples', 'Bananas', 'Oranges']
  10.     },
  11.     yAxis: {
  12.         title: {
  13.             text: 'Fruit eaten'
  14.         }
  15.     },
  16.     series: [{
  17.         name: 'Jane',
  18.         data: [1, 0, 4]
  19.     }, {
  20.         name: 'John',
  21.         data: [5, 7, 3]
  22.     }]
  23. };
  24. var chart = Highcharts.chart('container', options);

为了更好的使用 Highcharts 配置，你需要了解 JavaScript 对象的基本知识，下面我们简单的说一些 JavaScript 对象操作的要点。

1、对象的创建及赋值

对于 C语言风格的开发者来说，下面的方式更符合编写习惯

  1. var oiptions = new Object();
  3. options.chart = new Object();
  4. options.chart.renderTo = 'container';
  5. options.chart.type = 'line';
  7. options.series = new Array();
  8. options.series[0] = new Object();
  9. options.series[0].name = '小明';
  10. options.series[0].data = new Array(1, 0, 4);

上述编写方式在 JS 里是不推荐的，更好的做法应该是

  1. var options = {
  2.     chart: {
  3.         renderTo: 'container',
  4.         type: 'line'
  5.     },
  6.     series: [{
  7.         name: '小明',
  8.         data: [1, 0, 4]
  9.     }]
  10. }

因为后面的方式更简单易读（当然上述两种方式运行的结果是一样的），这也是 JSON 的优势。

创建配置对象后，我们就可以通过构造函数来创建图表了。

  1. var chart = Highcharts.chart('container', options);

2、对象取值

在 JS 中可以通过逗号或中括号的形式取对象的值，另外可以通过 delete 删除对象属性，示例代码如下：

  1. options.chart.type     // JS 对象取值
  2. options.chart['type']  // 同上
  3. delete options.chart.type // 删除属性

3、数组相关操作

JS 数组的创建可以用 new Array() 或更简单的 [] 来创建，其中 length 属性为数组的长度，push() 函数可以添加数组元素；join() 可以将数组转换成字符串，相应字符串可以通过的 split() 函数将其分隔成数组，下面用示例代码说明：

  1. var series = [{
  2.     name: '小明',
  3.     data: []
  4. }];
  6. series.push({
  7.     name: '小红',
  8.     data: []
  9. });
  11. series[2].name;
  14. var arr = [1, 2, 4, 10, 20];
  15. var arrJoin = arr.join(); // 结果"1,2,4,10,20"，默认的分隔符是 ,
  16. arrJoin.split(',');       // 将字符串按照 , 分隔，结果是 [1, 2, 4, 10, 20]

二、全局配置

全局配置是针对同一个页面多个图表有效的配置，我们将多个图表的相同配置提取出来并配置在全局配置中（这样就可以省去在每个图表中配置一样的参数，这也是 Highcharts API 灵活性的表现）。

实例代码如下：

  1. // 全局配置，针对页面上所有图表有效
  2. Highcharts.setOptions({
  3.     chart: {
  4.         backgroundColor: {
  5.             linearGradient: [0, 0, 500, 500],
  6.             stops: [
  7.                 [0, 'rgb(255, 255, 255)'],
  8.                 [1, 'rgb(240, 240, 255)']
  9.                 ]
  10.         },
  11.         borderWidth: 2,
  12.         plotBackgroundColor: 'rgba(255, 255, 255, .9)',
  13.         plotShadow: true,
  14.         plotBorderWidth: 1
  15.     }
  16. });
  18. var chart1 = Highcharts.chart('container', {
  19.     xAxis: {
  20.         type: 'datetime'
  21.     },
  23.     series: [{
  24.         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  25.         pointStart: Date.UTC(2010, 0, 1),
  26.         pointInterval: 3600 * 1000 // one hour
  27.     }]
  28. });
  30. var chart2 = Highcharts.chart('container', {
  31.     chart: {
  32.         type: 'column'
  33.     },
  35.     xAxis: {
  36.         type: 'datetime'
  37.     },
  39.     series: [{
  40.         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  41.         pointStart: Date.UTC(2010, 0, 1),
  42.         pointInterval: 3600 * 1000 // one hour
  43.     }]
  44. });

在线试一试

原文: https://www.hcharts.cn/docs/how-to-set-options