Highcharts使用二维数组生成图表
二维数组是更为灵活的一种数据存储方式。在Highcharts中。能够使用配置项column和rows二维数组。对于使用columns构建的二维数组,Highcharts会依照列从上向下读取每一个x值的节点y值。而从第二行開始,每行是一个数据列,而且開始的第一个元素是数据列名。其构成的二维数组结构例如以下:
[
[null, x值1, x值2, x值3, …, x值n],
[数据列名1, y值1, y值2, y值3, …, y值n],
[数据列名2, y值1, y值2, y值3, …, y值n,],
[…… ],
[数据列n, y值1, y值2, y值3, …, y值n,]
]
对于使用rows构建的二维数组,Highcharts会依照从左到右读取每一个x值的节点y值。
而从第二列開始,每列都是一个数据列,而且開始的第一个元素是数据列名。其构成的二维数组结构例如以下:
[
[null, 数据列名1, 数据列名2, 数据列名3, …, 数据列名n],
[x值1, y值1, y值1, y值1, …, y值1 ],
[x值2, y值2, y值2, y值2, …, y值2 ],
[… ],
[x值n, y值n, y值n, y值n, …, y值n ],
]
以下从columns构建的二维数组中读取数据。生成图表。核心代码例如以下:
data: {
columns: [
[null, 1, 2, 3, 4, 5, 6, 7],
[‘成绩’,85,93,95,91,97,94,89]
]
}
columns构建的二维数组
PS:该内容已经增加《网页图表Highcharts实践教程基础篇》v1.2.4中。
Highcharts使用二维数组生成图表的更多相关文章
- JS实现将二维数组生成到页面上
前言 之前没说过数组,现在来写一下数组 CSS span { border:2px solid skyblue; width:30px; height: 30px; display: inline-b ...
- thinkphp foreach循环生成二维数组的方法
先做个问题记录,另外下面是做的过程中遇到的一个没想明白的现象 foreach($result as $key => $val ){ $wzList[$key]['lik']=$val[0]; $ ...
- C语言动态生成二维数组
# 动态创建二维数组示例 #include "stdlib.h" #include "stdio.h" #include <malloc.h> in ...
- 将String类型的二维数组中的元素用FileOutputStream的write方法生成一个文件
将String类型的二维数组中的元素用FileOutputStream的write方法生成一个文件import java.io.File;import java.io.FileOutputStre ...
- php数组根据某一个键值,把相同键值的合并生成一个新的二维数组
http://blog.csdn.net/xyzchenxiaolin/article/details/51700485 源数据: $infos = array( array( 'a' => 3 ...
- php数组实现根据某个键值将相同键值合并生成新二维数组的方法
$infos = array( array( 'a' => 36, 'b' => 'xa', 'c' => '2015-08-28 00:00:00', 'd' => '201 ...
- JAVA生成一个二维数组,使中间元素不与相邻的9个元素相等,并限制每一个元素的个数
JAVA生成一个二维数组,使中间元素不与相邻的9个元素相等,并限制每一个元素的个数 示例如下 至少需要九个元素:"A","B","C",&q ...
- 使用POI对excel进行操作生成二维数组
import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...
- axis2生成webservice服务端返回String[]和String[][]一维数组和二维数组解析
环境:用axis2生成服务端,用aixs做客户端 1:直接返回String[]: public String[] testArr(String name) { String[] ret=new Str ...
随机推荐
- AngularJS中获取ng-repeat动态生成的ng-model值
需求:通过ng-repeat动态生成的CheckBox,实现勾选控制对应的批次号.如图: html: <div class="clearfix"> <div cl ...
- openGL初学函数解释汇总
openGL初学函数解释汇总 1.GLUT工具包提供的函数 //GLUT工具包所提供的函数 glutInit(&argc, argv);//对GLUT进行初始化,这个函数必须在其它的GLUT使 ...
- BZOJ 2199: [Usaco2011 Jan]奶牛议会
2199: [Usaco2011 Jan]奶牛议会 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 375 Solved: 241[Submit][S ...
- Qt程序crash信息的捕捉与跟踪(转)
本文转自 https://blog.csdn.net/lanhy999/article/details/12189375
- dpdk 代码分析一 : 内存初始化
一 前言 http://www.dpdk.org/ dpdk 是 intel 开发的x86芯片上用于高性能网络处理的基础库,业内比较常用的模式是linux-app模式,即 利用该基础库,在用户层空 ...
- 关于python浮点数的精度问题。
若想严格按照四舍五入进行,可使用Decimal,代码如下: from decimal import Decimal, ROUND_HALF_UP def round(x, n): return Dec ...
- 第一章:1-11、在上题的分组交换网中,设报文长度和分组长度分别为x和(p+h)(bit),其中p为分组的数据部分的长度,而h为每个分组所带的控制信息固定长度,与p的大小无关。通信的两端共经过k段链路。链路的数据率为b(bit/s),但传播时延和结点的排队时间均可忽略不计。若打算使总的时延为最小,问分组的数据部分长度p应取为多大?
<计算机网络>谢希仁著第四版课后习题答案答: 分组个x/p, 传输的总比特数:(p+h)x/p 源发送时延:(p+h)x/pb 最后一个分组经过k-1个分组交换机的转发,中间发送时延:(k ...
- Vue.js之父子组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Educational Codeforces Round 31 A. Book Reading【暴力】
A. Book Reading time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- 深入分析CVE-2016-5195 Dirty Cow
前面一段时间,这个编号为CVE-2016-5195的漏洞刷爆了各个安全相关的博客和网站,这个漏洞可以对任意可读文件进行写操作从而导致提权,通杀了包括Android在内的绝大多数linux版本,,影响不 ...