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 ...
随机推荐
- J2SE总结(一)-------容器
最近大家都在讨论容器以及如何在项目中去实际的应用它,由于之前对容器没有什么概念,所以把J2SE里面讲的容器的一些基础知识看了一下,总结一下最基本的东西. 围绕整章最核心的就属下面这张图了吧. 一.概念 ...
- 汕头市队赛 SRM1X T1
木之本樱 背景 “西瓜是可以种在树上的!”——木之本樱 描述 空地上,一排排的西瓜树拔地而起. 魔法世界里,空地是无限大的.所有的树排成了n条直线,每条直线也是向左右两端无限延伸的. 由于自己姓木(之 ...
- 汕头市队赛 SRM 09 A 撕书
A 撕书I-3 SRM 09 背景&&描述 琉璃在撕书. 书总共有n页,都悬浮在数轴上,第i页的位置为,上面写着一个数字. 琉璃从右往左撕书.假如看到了第i页,就把在第 ...
- C#操作XML序列化与反序列化
public class XmlSerializerHelper { /// <summary> /// 从XML文件中反序列化读取对象 /// </summary> /// ...
- AUTOIT3设置用户包含目录
- Strlcpy和strlcat——一致的、安全的字符串拷贝和串接函数【转】
转自:http://blog.csdn.net/kailan818/article/details/6731772 英文原文: http://www.gratisoft.us/todd/papers/ ...
- SQL Server分页语句ROW_NUMBER,读取第4页数据,每页10条
SQL Server分页语句ROW_NUMBER,读取第4页数据,每页10条 SELECT Id,[Title],[Content],[Image] FROM ( SELECT ROW_NUMBER( ...
- 浅谈密码加SALT原理(转载)
原文出处:http://www.2cto.com/Article/201201/117051.html 我们知道,如果直接对密码进行散列,那么黑客可以对通过获得这个密码散列值,然后通过查散列值字典(例 ...
- 实现如下语法的功能:var a = (5).plus(3).minus(6); //2
从汤姆大叔的博客里看到了6个基础题目:本篇是第5题 - 实现如下语法的功能:var a = (5).plus(3).minus(6); //2 解题关键: 1.理解使用(5)和5的区别 2.构造函数原 ...
- UVA 10369 - Arctic NetWork (求最小生成树)
题意: 在南极有 N 个科研站,要把这些站用卫星和无线电连接起来,是的任意两个之间都能互相通信,如果其中任意的一个地方安装了卫星,那么就可以和其他安装卫星的互相通信,和距离没有关系,但是安装无线电 ...