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

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

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

Highcharts最新试用版

系列对象具有以下结构：

series: [{    name: '',    data: []}]

注意：系列对象是一个数组，这意味着它可以包含多个系列。

name属性为系列提供一个名称，将其悬停在图表和图例中的系列上时会显示。

系列数据

实际数据由data属性表示为数组，并可以三种方式表示：

1、数值列表。在这种情况下，数值将被解释为y值，并且x值将自动计算（从0开始并以1递增，或者从pointStart和pointInterval选项开始）。如果轴具有类别，则将使用这些类别。

2、有两个或多个值的数组列表。在这种情况下，第一个值为x值，第二个为y值。如果第一个值是字符串，则将其用作点的名称，并且x值将按照上述规则递增。有些序列（例如arearange）接受两个以上的值。

3、具有命名值的对象列表。在这种情况下，对象是点配置对象，如options.point下所示。可以从API中查看可用属性的完整列表，例如line series。请注意，要使此选项在Highstock中起作用，总点数不得超过turboThreshold，或者必须增加turboThreshold设置。

点和标记

对于笛卡尔图表，一个点表示图表上的（x，y）对。可以在系列数据中为点提供单独的选项。对于其他图表类型，该点表示除（x，y）以外的其他值。例如，在范围图中，该点表示（x，低，高）。在OHLC图表中，该点表示（x，开盘，高，低，收盘）。在饼图或量规中，该点表示单个值。

series: [{    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,            { y: 216.4, color: '#BF0B23'}, 194.1, 95.6, 54.4]}]

折线图，样条线图，面积图和面积线图可以选择显示点标记，这些点与点选项略有不同，因为它们可以更改点标记的样式和形状。

这是显示如何更改特定点上标记的颜色和大小的示例。

series: [{    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,    {y: 216.4, marker: { fillColor: '#BF0B23', radius: 10 } }, 194.1, 95.6, 54.4]}]

系列选项

可以在Highchars选项结构的两个位置定义系列选项。

• plotOptions中定义了适用于多个系列的常规选项  。要为图表中的所有系列设置常规选项，请使用  plotOptions.series。要为特定图表类型设置常规选项，每种图表类型都有其自己的plotOptions集合。
• 每个系列的特定选项在系列  选项结构中定义  。也可以在特定的系列定义中设置为plotOptions结构列出的所有选项。某些选项（例如  data，  id  或  name）仅对特定系列有意义。

以下是可应用于数据系列的最常见选项的概述：

动画

允许禁用或更改系列初始动画的特征。默认情况下启用动画。

颜色

允许更改系列的颜色。

点选择

启用点选择的代码：

plotOptions: {    series: {        allowPointSelect: true    }}

获取所选点的代码：

var selectedPoints = chart 。getSelectedPoints （）;

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