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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
Sep 08 Javascript
angular.js实现购物车功能
Oct 23 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
表单内同名元素的控制
2006/11/22 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
python利用lxml读写xml格式的文件
2017/08/10 Python
python的变量与赋值详细分析
2017/11/08 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python实现仿射密码的思路详解
2020/04/23 Python
什么是Python变量作用域
2020/06/03 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
试用期员工工作自我评价
2014/09/10 职场文书
离婚被告答辩状
2015/05/22 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang