Highcharts学习之数据列
更新时间：2016年08月03日 14:47:03 投稿：daisy
数据列配置是 Highcharts 最复杂也是最灵活的配置，如果说 Highcharts 是灵活多变，细节可定制的话，那么数据列配置就是这个重要特性的核心。
什么是数据列
数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：
series : [{
name : '',
data : []
}]
提示：数据列配置是个数组，也就是数据配置可以包含多个数据列。
数据列中的 name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
tags:
1.数据列中的数据填充：
方法一：一维数组
如果有categories属性的话就是使用一维数组
data : [1, 4, 6, 9, 10]
方法二：二维数组
如果没有categories属性的话就是使用二维数组
data ： [ [5, 2], [6,3], [8,2] ]
方法三：集合
series:[{
data : [{
name : "point 1",
color : "#00ff00",
y : 0
}, {
name : "Point 2",
color : "#ff00ff",
y : 5
}]
}]
2.线条宽度（lineWidth）：
将线条的宽度改为5px默认为1px
series: [{
data: [216.4, 194.1, 95.6],
lineWidth: 5
}]
3.数据标签（dataLables）：
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
4.线条样式（Dash Style）:
series: [{
data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
dashStyle: 'longdash'
}, {
data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],
dashStyle: 'shortdot'
}]
5.Zoom
series:[{
name:"a",
data:[1,2,3],
zoneAxis: 'x', //指定作用于哪个轴
zones: [{
value: 1.7,
color:'#90ed7d'//这两个属性是可以放在一起的但不能和dashStyle放在一起
}, {
dashStyle: 'dot'
}]
}]
以上就是本文的全部内容，在 Highcharts 中，数据列的配置是个非常重要的配置，同时又由于可配置的属性非常对，配置的灵活性非常高，需要大家自己自己体会和理解。
相关文章
本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程，包括立方体、平面与球体，有需要的朋友们可以学习下。2016-08-08
精通JavaScript 纠正 cleanWhitespace函数
这个函数用在火狐(firefox)上面老是出错，今天仔细研究了下，改正了，希望别人不要遇到我这样的问题2010-03-03
这篇文章主要介绍了node.js中的socket.io入门实例,并对websocket等反向ajax技术做了介绍,需要的朋友可以参考下2014-04-04
这篇文章主要为大家介绍了js类库styled-components快速入门的教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
JS日程管理插件FullCalendar是一款基于jQuery的日历日程插件，适用于各种日程安排、工作计划等场景，您可以很方便的查看查看待办事项，标记重要事项以及绑定点击和拖动事件，能快速的整合到您的项目中，本文将简单介绍FullCalendar的使用2017-02-02
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。下面通过本文的介绍及实例一起来学习学习吧。2016-08-08
本篇将介绍基本材质以及两种基于光照模型的材质（Lamber与Phong），有需要的小伙伴们可以参考学习。2016-08-08
FullCalendar是一款基于jQuery的日历插件，适用于各种日程安排、工作计划等场景，本文是fullCalendar官方文档的中文版，主要介绍了fullCalendar的具体属性与方法，大家可以参考一下2017-02-02
使用RequireJS库加载JavaScript模块的实例教程
RequireJS库的主旨就是一个js文件的模块加载器,可以独立于框架来进行使用,这里我们整理了使用RequireJS库加载JavaScript模块的实例教程,需要的朋友可以参考下2016-06-06
今天小编带大家学习的是Three.js的文字形状与自定义形状，文章内容很详细，对大家学习Three.js或许有帮助，下面一起来看看吧。2016-08-08
最新评论