JavaScript图表库Highcharts入门教程（九）：系列数据（下）

系列是一组数据，例如折线图或一组列。图表上绘制的所有数据都来自系列对象。

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

Highcharts最新试用版

线宽

允许更改线的宽度。

更改线宽的代码：

series: [{    data: [216.4, 194.1, 95.6],    lineWidth: 5}],

堆叠

堆叠使系列可以彼此重叠放置。

游标

允许光标更改外观以指示点和系列是可单击的。

数据标签

允许在图表上为一系列数据的每个点显示数据标签。

显示如何启用数据标签的代码示例：

plotOptions: {    line: {        dataLabels: {            enabled: true        }    }},

注意：您可能希望禁用鼠标跟踪功能，该功能会突出显示系列并将鼠标悬停在鼠标悬停上（如果禁用了鼠标跟踪功能，则不会显示工具提示）。

数据标签上显示的文本也可以通过使用formatter选项进行自定义。

短划线样式

允许使用虚线代替实线，有几种不同的破折号选项可用。

设置单个系列的虚线的代码（dashStyle也可以在plotOptions中设置）：

series: [{    data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],    dashStyle: 'longdash'}]

区域

在某些情况下，您可能希望将图形的某些部分显示为不同的部分，一个常见的示例是当数据落入特定范围时使用不同的颜色。使用可以达到此效果zones。默认情况下，分区是在yAxis上完成的，但是可以通过zoneAxis在系列上设置变量来轻松更改。对于分区本身，您必须定义一个名为的数组zones，其中每个条目均对应于一个区域，该区域由parameter分隔，该参数value是该区域所到达的点。每个区域可以覆盖的设置是color，fillColor和dashStyle。

用于分区的代码：

zones: [{     value: 0,     color: '#f7a35c' }, {     value: 10,     color: '#7cb5ec' }, {     color: '#90ed7d' }]

此方法的另一个常见用途是对未来的估计数据点进行样式设置。

想要了解或购买Highcharts正版授权的朋友，欢迎咨询在线客服
标签：

来源：慧都