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学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
Apr 28 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 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
ip签名探针
2006/10/09 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
python中K-means算法基础知识点
2021/01/25 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
超市业务员岗位职责
2013/12/05 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
农村改厕实施方案
2014/03/22 职场文书
甜品店创业计划书
2014/08/14 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
组织生活会发言材料
2014/12/15 职场文书
安阳殷墟导游词
2015/02/10 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书