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 相关文章推荐
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
详解JavaScript的变量
Apr 04 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
JS实现简单打字测试
Jun 24 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 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
改造一台复古桌面收音机
2021/03/02 无线电
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
React组件的三种写法总结
2017/01/12 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
python使用append合并两个数组的方法
2015/04/28 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
python如何使用腾讯云发送短信
2020/09/17 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
电厂职工自我鉴定
2014/02/20 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
春风化雨观后感
2015/06/11 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python