手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Highcharts学习之数据列
Highcharts学习之数据列
摘要:什么是数据列数据列是一组数据集合,例如一条线,一组柱形等。图表中所有点的数据都来自数据列对象,数据列的基本构造是:series:[{name...

什么是数据列

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

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

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

数据列中的 name 代表数据列的名字,并且会显示在数据提示框(Tooltip)及图例(Legend)中

tags:

Highcharts学习之数据列1

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 }] }]

Highcharts学习之数据列2

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 中,数据列的配置是个非常重要的配置,同时又由于可配置的属性非常对,配置的灵活性非常高,需要大家自己自己体会和理解。

【Highcharts学习之数据列】相关文章:

怎么用javascript进行拖拽第1/2页

Javascript的IE和Firefox兼容性汇编

js光标定位文本框回车表单提交问题的解决方法

JS、HTML代码运行工具

JavaScript基本数据结构

链接渐变效果

jQuery插件制作之全局函数用法实例

jQuery插件制作之参数用法实例分析

javascript基于DOM实现省市级联下拉框的方法

checkbox实现全选的多种方法 不断更新 原创

精品推荐
分类导航