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

    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. };

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

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

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

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

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

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

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

    二、全局配置

    全局配置是针对同一个页面多个图表有效的配置，我们将多个图表的相同配置提取出来并配置在全局配置中（这样就可以省去在每个图表中配置一样的参数，这也是 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
    17. var chart1 = Highcharts.chart('container', {
    18.     xAxis: {
    19.         type: 'datetime'
    20.     },
    22.     series: [{
    23.         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],
    24.         pointStart: Date.UTC(2010, 0, 1),
    25.         pointInterval: 3600 * 1000 // one hour
    26.     }]
    27. });
    29. var chart2 = Highcharts.chart('container', {
    30.     chart: {
    31.         type: 'column'
    32.     },
    34.     xAxis: {
    35.         type: 'datetime'
    36.     },
    38.     series: [{
    39.         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],
    40.         pointStart: Date.UTC(2010, 0, 1),
    41.         pointInterval: 3600 * 1000 // one hour
    42. });