彩票走势图

JavaScript图表库Highcharts入门教程(九):系列数据(上)

翻译|使用教程|编辑:吴园园|2020-03-10 17:26:17.023|阅读 142 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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)仅对特定系列有意义。

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

动画

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

颜色

允许更改系列的颜色。

点选择

允许选择和突出显示单个点。可用于删除,编辑或显示有关点的信息。

JavaScript图表库Highcharts入门教程(九):系列数据(上)

启用点选择的代码:

plotOptions: {
    series: {
        allowPointSelect: true
    }
}
获取所选点的代码:
var selectedPoints = chart 。getSelectedPoints ();

想要了解或购买Highcharts正版授权的朋友,欢迎

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP