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数据分享
May 12 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 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 UTF8 文件的签名问题
2009/10/30 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
thinkphp缓存技术详解
2014/12/09 PHP
Laravel日志用法详解
2016/10/09 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python中count函数简单用法
2020/01/05 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python如何获取文件指定行的内容
2020/05/27 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
《沉香救母》教学反思
2014/04/19 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书