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 文档碎片
Jul 13 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
js实现简单的随机点名器
Sep 17 Javascript
element tree树形组件回显数据问题解决
Aug 14 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开发中常用的8个小技巧
2008/08/27 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
删除重复数据的算法
2006/11/23 Javascript
JavaScript高级程序设计
2006/12/29 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
Three.js实现简单3D房间布局
2018/12/30 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
python包的导入方式总结
2021/03/02 Python
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
培训讲师岗位职责
2014/04/13 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers