Highcharts数据表示(2)

Highcharts数据表示(2)

数据节点是图表中最小的元素。每个数据节点都是一个数据单元。它确定了图表中一个图形元素的各种信息。一个数据节点通常包括以下三类信息:

1.坐标位置信息

由于Highcharts中大部分的图表都是平面2D类型的,所以每个节点都需要对应的坐标信息(x,y)。在Highcarts中,坐标信息是通过配置项x和y定义的。其语法形式如下:

  • x:Number|String
  • y:Number

其中,配置项x的值可以为数字,也可以是字符串;配置项y必须是数字。

2.其他必须信息

除了坐标信息外,很多图表需要节点提供额外的信息,如柱体的颜色,气泡的大小等等。对于这些信息,也是在数据节点中定义的。例如对于柱形图的节点,需要使用配置项color指定该节点对应的柱体的颜色,语法如下:

  • color:Color

其中,参数Color指定该柱体填充的颜色。

3.用户补充信息

有时,用户为了对节点信息做补充。这时,用户需要创建自己的配置项,并赋值。这些节点信息可以在提示框、数据标签中显示。例如,在本书第一个实例中,用户可以为每个节点添加配置项,存放最高温度发生的时间。形式如下:

  • hightemtime:Number|String|Object

其中,配置项名hightemtime是用户自己定义的,其值的类型也是用户自己指定的。

我们了解节点中包含的信息后,就可以将所有的信息定义为,其形式如下:

  • {
  • x:Number|String,
  • y:Number,
  • color:Color,
  • hightemtime:Number|String|Object
  • }

每个节点都是这样的一个对象。而整个数据列的节点就构成一个对象数组,形式如下:

  • data:[{
  • x:Number|String,
  • y:Number,
  • color:Color,
  • hightemtime:Number|String|Object
  • },{
  • x:Number|String,
  • y:Number,
  • color:Color,
  • hightemtime:Number|String|Object
  • },
  • ……
  • {
  • x:Number|String,
  • y:Number,
  • color:Color,
  • hightemtime:Number|String|Object
  • }]

PS:该内容已经加入《网页图表Highcharts实践教程基础篇》v1.2.5。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-03 06:02:51

Highcharts数据表示(2)的相关文章

Highcharts数据表示(3)

Highcharts数据表示(3) 採用对象数组的形式,能够明白节点上每一个项目的值.可是当节点较多时,会造成大量的冗余代码. 假设不写配置项名称,对象数组就能够简化二维数组.形式例如以下: data:[ [Number|String , Number , Color , Number|String|Object], [Number|String , Number , Color , Number|String|Object], [Number|String , Number , Color ,

Highcharts数据表示(4)

Highcharts数据表示(4) 对于一些简单图表类型,在某些情况下,数据还可以进一步简化.但是在简化的时候,必须同时满足以下两个条件: 图表只需要节点的坐标位置数据,就可以实现对应的图表. 各个节点的x轴坐标值是等差数列. 在满足以上条件后,数据就可以简化为一维数组形式,形式如下: data:[Number, Number, Number,--, Number] 简化后,用户需要指定x轴坐标值的起始值和等差值.这时需要在配置项series中设置配置项pointStart和pointInter

Highcharts的数据表示(1)

Highcharts的数据表示(1) 在Highcharts中,将关联的一系列的数据称为数据列.而构成数据的每一个数据单元称为数据节点.下面详细讲解数据列和数据节点的表示方式.数据列就是相关联的一系列数据的集合.例如,第一个实例所呈现的数据就是由七个温度数据构成的集合.他们的关联关系是构成连续的一周温度.在Highcharts中,数据列使用series表示.一个图表中,可以有一个或者多个数据列.所以,series的值是一个数组.形式如下: series:[{ //第一个数据列的相关配置 },{

Highcharts(一)

由来 2014年10月27日,我入职了我现在的这家公司,也是我第一家公司.到今天已经快3个月了,虽然这家公司规模不小,但是IT部的规模很小.到目前为止,整个部门17人,包括运维和开发.我们的项目组叫”MD”项目组,整个团队5个人.刚进公司简单的熟悉业务后,老大安排我负责系统服务端的接口.简单的说就是前端需要什么样的数据,我就给它提供相应的接口.就这样,写了1个多月的接口.由于系统需求,需要系统提供曲线图.老大让我到网上找一个控件学习一下,解决这个需求.这就是我学习Highcharts的由来. 介

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式.其中最简单直接,形象明了的就是用图表说明问题了. 如果在以前,要实现各种图表,可能很多人会选择flash.但是flash成本较高,图表多的时候很耗性能.后来越来越多的纯js框架出现,让大家有了更多的选择.所以接下来我想推荐几个不错的图表js框架给大家用.

分层数据表示模型--多层非负矩阵分解

1 简介 为了理解复杂的数据,人们提出了分层特征提取概念.著名的算法之一是2006年Hinton提出的Deep Belief Network(DBN).随着训练深层结构的成功,人们又提出了许多深度学习的变体.尽管这些多层算法产生了多层方法在特征提取和提供对复杂问题的有效方法,但并没有告诉我们通过多层结构学到的特征之间的关系. 本文我们提出了一个分层数据表示模型,分多层的非负矩阵分解.我们提供了NMF算法的一个变体,nsNMF来进行分层学习.这里,我们通过在数据集上学习层之间的关系直观的展示特征分

[转] angular2+highcharts+chart.js

这里是在ionic2下使用highchairs和chart.js的简单示例chartjs部分参考http://www.jianshu.com/p/bc18132da812 1.安装hightcharts npm install highcharts --save typings install dt~highcharts --global --save 2.编辑 html文件在html中添加一个div来显示图表 <ion-content class="about"> <

Highcharts简单入门

一.简介 Hicharts是一款支持移动端.图表类型丰富.方便快捷的 HTML5 交互性图表库,旨在让数据可视化更简单. 下面是一个简单的折线图,交互体验很棒. 二.如何使用? 1.官网下载压缩包 2.将js文件夹下复制到工程中 3.页面引入三个js文件 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script type="text

HighCharts插件学习(二)

HighCharts属性 credits: {版权信息} data: {数据功能模块} drilldown: {钻取} exporting: {导出} labels: {标签} legend: {图例} loading: {加载} navigation: {导航} noData: {没有数据} pane: {-} plotOptions: {数据列配置} responsive: {响应式} series: [{数据列}] subtitle: {副标题} title: {标题} tooltip: