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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
使用JS读秒使用示例
Sep 21 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
vue中锚点的三种方法
Jul 06 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
中专毕业生个人职业生涯规划
2014/02/19 职场文书
企业后勤岗位职责
2014/02/28 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
学校交通安全责任书
2014/08/25 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技