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