Highcharts学习之数据列


Posted in Javascript onAugust 03, 2016

什么是数据列

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

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

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

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

tags:

Highcharts学习之数据列

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

Javascript 相关文章推荐
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
javascript中的面向对象
Mar 30 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 #Javascript
JS实现的表格行上下移动操作示例
Aug 03 #Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 #Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 #Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 #Javascript
JS简单实现点击复制链接的方法
Aug 03 #Javascript
JS清除字符串中重复值的实现方法
Aug 03 #Javascript
You might like
PHP语法速查表
2006/12/06 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
axios基本入门用法教程
2017/03/25 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python数据处理实战(必看篇)
2017/06/11 Python
python处理按钮消息的实例详解
2017/07/11 Python
pygame实现五子棋游戏
2019/10/29 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
详解python算法常用技巧与内置库
2020/10/17 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
十佳教师事迹材料
2014/01/11 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
岗位明星事迹材料
2014/05/18 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书