Highcharts学习之数据列

什么是数据列

数据列是一组数据集合,例如一条线,一组柱形等。图表中所有点的数据都来自数据列对象,数据列的基本构造是:

rush:js;"> series : [{ name : '',data : [] }]

提示

数据列配置是个数组,也就是数据配置可以包含多个数据列。

数据列中的

name

代表数据列的名字,并且会显示在数据提示框(

Tooltip

)及图例(

Legend

)中

tags:

1.数据列中的数据填充:

方法一:一维数组

如果有categories属性的话就是使用一维数组

rush:js;"> data : [1,4,6,9,10]

方法二:二维数组

如果没有categories属性的话就是使用二维数组

rush:js;"> data : [ [5,2],[6,3],[8,2] ]

方法三:集合

rush:js;"> series:[{ data : [{ name : "point 1",color : "#00ff00",y : 0 },{ name : "Point 2",color : "#ff00ff",y : 5 }] }]

2.线条宽度(linewidth):

将线条的宽度改为5px认为1px

rush:js;"> series: [{ data: [216.4,194.1,95.6],linewidth: 5 }]

3.数据标签(dataLables):

rush:js;"> plotOptions: { series: { dataLabels: { enabled: true,} } },

4.线条样式(Dash Style):

rush:js;"> series: [{ data: [1,3,2,5,6],dashStyle: 'longdash' },{ data: [2,1,5],dashStyle: 'shortdot' }]

5.Zoom

rush:js;"> series:[{ name:"a",data:[1,zoneAxis: 'x',//指定作用于哪个轴 zones: [{ value: 1.7,color:'#90ed7d'//这两个属性是可以放在一起的但不能和dashStyle放在一起 },{ dashStyle: 'dot' }] }]

以上就是本文的全部内容,在 Highcharts 中,数据列的配置是个非常重要的配置,同时又由于可配置的属性非常对,配置的灵活性非常高,需要大家自己自己体会和理解。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...