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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
实例浅析js的this
Dec 11 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
Vue3 中的数据侦测的实现
Oct 09 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php获取apk包信息的方法
2014/08/15 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP Include文件实例讲解
2019/02/15 PHP
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
详解Python Socket网络编程
2016/01/05 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python中的常量和变量代码详解
2018/07/25 Python
python 重命名轴索引的方法
2018/11/10 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
计划生育个人总结
2015/03/02 职场文书
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript