JavaScript图表库Highcharts入门教程（四）：如何设置选项

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts现已更新至最新版本7.2.0，新版本添加了新的顶级选项-说明；几乎所有系列都增加了对多个色轴的支持；增加了高对比度光和高对比度 – 黑暗主题，与背景形成3：1对比度，并修复了一些之前存在的BUG，赶快下载试用吧~

重要推荐：

• 纯JavaScript编写的开源股票图表控件：Highstock

• 一个基于web项目创建地图的HTML5/JavaScript地图组件：Highmaps

Highcharts最新试用版

如何设置选项

• 选项对象

• 全局选项

选项对象

使用图表的构造函数Highcharts.Chart初始化图表时，options对象是您传递的第一个参数。

在下面的示例中，标记为红色的代码表示options对象：

$(function() {    var chart1 = Highcharts.chart({        chart: {            renderTo: 'container',            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]        }[    });});

为了充分利用Highcharts，了解选项对象的工作方式以及如何以编程方式对其进行更改非常重要。这些是关于JavaScript对象的一些关键概念：

• 示例中的Highcharts选项定义为对象文字。通过以这种方式指出配置，我们可以拥有一个干净，易于阅读且占用空间少的配置对象。具有C类型语言背景的开发人员可能更熟悉以下复杂的代码：

// Bad code: var options = new Object();options.chart = new Object(); options.chart.renderTo = 'container'; options.chart.type = 'bar';options.series = new Array(); options.series[0] = new Object(); options.series[0].name = 'Jane'; options.series[0].data = new Array(1, 0, 4);

作为JavaScript对象文字，我们将像下面这样编写。请注意，这两个选项对象将产生完全相同的结果。

// Good code:var options = {    chart: {        renderTo: 'container',        type: 'bar'    },    series: [{        name: 'Jane',        data: [1, 0, 4]    }]};

在上面的示例中，options对象是自己创建的，可以通过将其传递给图表构造函数来添加到图表中：

$(document).ready(function() {    var chart = new Highcharts.Chart(options);});

• 使用对象文字符 创建对象后，我们可以通过点符 扩展其成员。假设我们有一个类似于上面“良好代码”中定义的对象。下面的代码向它添加了另一个系列。记住options.series是一个数组，所以它具有push方法。

options.series.push({    name: 'John',    data: [3, 4, 2]})

• 处理JavaScript对象时可以派上用场的另一个事实是，点符 和方括 符 是等效的，因此您可以按成员的字符串名称访问所有成员。实际上，这options.renderTo始终与以下内容相同：options[‘renderTo’]

全局选项

如果要对同一页面上的所有图表应用一组选项，请使用Highcharts.setOptions，如下所示。 

$(function() {    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 = new Highcharts.Chart({        chart: {            renderTo: '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 = new Highcharts.Chart({        chart: {            renderTo: 'container2',            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        }]    });});

注意：Highcharts下载随附的主题使用此功能。

=====================================================

想要购买Highcharts正版授权的朋友可以咨询官方客服。

标签：