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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
玩转Koa之核心原理分析
Dec 29 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写的采集程序
2007/03/16 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
javascript中的隐式调用
2018/02/10 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
Python卸载模块的方法汇总
2016/06/07 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python同时替换多个字符串方法示例
2019/09/17 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python 没有main函数的原因
2020/07/10 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
若干个Java基础面试题
2015/05/19 面试题
《跨越百年的美丽》教学反思
2014/02/11 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
创业计划书之酒厂
2019/10/14 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL