如何设置图表配置选项

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

一、图表配置对象

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

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

var options = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
};
var chart = Highcharts.chart('container', options);

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

1、对象的创建及赋值

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

var oiptions = new Object();

options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'line';

options.series = new Array();
options.series[0] = new Object();
options.series[0].name = '小明';
options.series[0].data = new Array(1, 0, 4);

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

var options = {
    chart: {
        renderTo: 'container',
        type: 'line'
    },
    series: [{
        name: '小明',
        data: [1, 0, 4]
    }]
}

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

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

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

2、对象取值

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

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

3、数组相关操作

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

var series = [{
    name: '小明',
    data: []
}];

series.push({
    name: '小红',
    data: []
});

series[2].name;


var arr = [1, 2, 4, 10, 20];
var arrJoin = arr.join(); // 结果"1,2,4,10,20"，默认的分隔符是 ,
arrJoin.split(',');       // 将字符串按照 , 分隔，结果是 [1, 2, 4, 10, 20]

二、全局配置

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

实例代码如下：

// 全局配置，针对页面上所有图表有效
Highcharts.setOptions({
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
                ]
        },
        borderWidth: 2,
        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
        plotShadow: true,
        plotBorderWidth: 1
    }
});

var chart1 = Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },

    series: [{
        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],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 3600 * 1000 // one hour
    }]
});

var chart2 = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

    xAxis: {
        type: 'datetime'
    },

    series: [{
        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],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 3600 * 1000 // one hour
    }]
});

在线试一试