Highcharts学习之数据列

什么是数据列

数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：

series : [{
  name : '',
  data : []
}]

提示：数据列配置是个数组，也就是数据配置可以包含多个数据列。

数据列中的 name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中

tags:

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
 }]
}]

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 中，数据列的配置是个非常重要的配置，同时又由于可配置的属性非常对，配置的灵活性非常高，需要大家自己自己体会和理解。

赞 (0)

相关推荐

  • 通过php动态传数据到highcharts

    通过php动态传数据到highcharts

    1:在平时工作中,在对数据进行展示的时候,是直接通过后台提供的接口来获取json串,用来展示.今天别人问怎么在本地演示一下请求的动态数据. 2:在本地搭建环境,我用的WampServer,下载地址:http://xiazai.jb51.net/201703/yuanma/WampServer_2.5_jb51.rar,浏览器打开localhost,文件存放在wamp/www目录下 3:php代码,没有写与数据库实时请求的过程. <?php $b = array( array('name'=>'

  • 动态更新highcharts数据的实现方法

    动态更新highcharts数据的实现方法 <!doctype html> <html> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="htt

  • Highcharts 多个Y轴动态刷新数据的实现代码

    Highcharts 多个Y轴动态刷新数据的实现代码

    效果图: js代码: $(function() { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', animation: Highcharts.svg, // don't animate in ol

  • Highcharts＋NodeJS搭建数据可视化平台示例

    前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取 由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置 为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne

  • Highcharts使用简例及异步动态读取数据

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCharts支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. 第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src="html/js/ch

  • Highcharts学习之数据列

    Highcharts学习之数据列

    什么是数据列 数据列是一组数据集合,例如一条线,一组柱形等.图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提示:数据列配置是个数组,也就是数据配置可以包含多个数据列. 数据列中的 name 代表数据列的名字,并且会显示在数据提示框(Tooltip)及图例(Legend)中 tags: 1.数据列中的数据填充: 方法一:一维数组 如果有categories属性的话就是使用一维数组 data : [1, 4, 6,

  • Vue Elenent实现表格相同数据列合并

    Vue Elenent实现表格相同数据列合并

    本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下 作者:秋名 思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表格进行合并.(同一个表格,但是每一行,固定一列的数据都相同,即可使用合并单元格,做到了既美观,也清晰.) template: <el-table :span-method="objectSpanMethod4" //在el-table里面添加合并单元格属性 > Js: da

  • Python Pandas学习之数据离散化与合并详解

    Python Pandas学习之数据离散化与合并详解

    目录 1数据离散化 1.1为什么要离散化 1.2什么是数据的离散化 1.3举例股票的涨跌幅离散化 2数据合并 2.1pd.concat实现数据合并 2.2pd.merge 1 数据离散化 1.1 为什么要离散化 连续属性离散化的目的是为了简化数据结构,数据离散化技术可以用来减少给定连续属性值的个数.离散化方法经常作为数据挖掘的工具. 1.2 什么是数据的离散化 连续属性的离散化就是在连续属性的值域上,将值域划分为若干个离散的区间,最后用不同的符号或整数 值代表落在每个子区间中的属性值. 离散化有

  • python3爬虫学习之数据存储txt的案例详解

    python3爬虫学习之数据存储txt的案例详解

    上一篇实战爬取知乎热门话题的实战,并且保存为本地的txt文本 先上代码,有很多细节和坑需要规避,弄了两个半小时 import requests import re headers = { "user-agent" : "Mozilla/5.0 (Windows NT 6.1; Win64; x64)" " AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari" &quo

  • python学习将数据写入文件并保存方法

    python将文件写入文件并保存的方法: 使用python内置的open()函数将文件打开,用write()函数将数据写入文件,最后使用close()函数关闭并保存文件,这样就可以将数据写入文件并保存了. 示例代码如下: file = open("ax.txt", 'w') file.write('hskhfkdsnfdcbdkjs') file.close() 执行结果: 内容扩展: python将字典中的数据保存到文件中 d = {'a':'aaa','b':'bbb'} s =

  • Python Pandas list列表数据列拆分成多行的方法实现

    1.实现的效果 示例代码: df=pd.DataFrame({'A':[1,2],'B':[[1,2],[1,2]]}) df Out[458]: A B 0 1 [1, 2] 1 2 [1, 2] 拆分成多行的效果: A  B 0  1  1 1  1  2 3  2  1 4  2  2 2.拆分成多行的方法 1)通过apply和pd.Series实现 容易理解,但在性能方面不推荐. df.set_index('A').B.apply(pd.Series).stack().reset_ind

  • MySQL 隔离数据列和前缀索引的使用总结

    MySQL 隔离数据列和前缀索引的使用总结

    隔离数据列 通常,我们会发现查询语句会妨碍MySQL使用索引.除非在查询语句中列是独立的,否则MySQL不会使用这些列的索引."隔离"的意思是索引列不应该成为表达式的一部分或者在一个查询函数体中.例如下面的例子就不会命中actor_id这个索引. SELECT `actor_id` FROM `actor` WHERE `actor_id` + 1 = 2; 对于人来说,很容易知道查询条件实际是actor_id = 4,但是MySQL不会这么处理,因此养成简化WHERE判决条件的习惯,

  • TensorFlow人工智能学习创建数据实现示例详解

    TensorFlow人工智能学习创建数据实现示例详解

    目录 一.数据创建 1.tf.constant() 2.tf.convert_to_tensor() 3.tf.zeros() 4.tf.fill() 二.数据随机初始化 ①tf.random.normal() ②tf.random.truncated_normal() ③tf.random.uniform() ④tf.random.shuffle() 一.数据创建 1.tf.constant() 创建自定义类型,自定义形状的数据,但不能创建类似于下面In [59]这样的,无法解释的数据. 2.

  • Python深度学习albumentations数据增强库

    Python深度学习albumentations数据增强库

    数据增强的必要性 深度学习在最近十年得以风靡得益于计算机算力的提高以及数据资源获取的难度下降.一个好的深度模型往往需要大量具有label的数据,使得模型能够很好的学习这种数据的分布.而给数据打标签往往是一件耗时耗力的工作. 拿cv里的经典任务为例,classification需要人准确识别物品类别或者生物种类,object detection需要人工画出bounding box, 确定其坐标,semantic segmentation甚至需要在像素级别进行标签标注.对于一些专业领域的图像标注,依

  • Python实战基础之Pandas统计某个数据列的空值个数

    目录 一.实战场景 二.主要知识点 三.菜鸟实战 1.创建 python 文件 2.运行结果 补充:Pandas检查是否有空值.处理空值 总结 一.实战场景 实战场景:Pandas 如何统计某个数据列的空值个数 二.主要知识点 文件读写 基础语法 Pandas numpy 三.菜鸟实战 马上安排! 1.创建 python 文件 """ 对如下DF,设置两个单元格的值 ·使用iloc 设置(3,B)的值是nan ·使用loc设置(8,D)的值是nan ""&

随机推荐