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(一)
May 26 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
一分钟理解js闭包
2016/05/04 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
react实现换肤功能的示例代码
2018/08/14 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python实现多线程的两种方式分析
2018/08/29 Python
详解python中的hashlib模块的使用
2019/04/22 Python
selenium+python环境配置教程详解
2019/05/28 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
服装设计专业自荐书范文
2013/12/30 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
员工入职担保书范文
2014/04/01 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Java并发编程必备之Future机制
2021/06/30 Java/Android
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技