Highcharts使用二维数组生成图表

最新推荐文章于 2020-11-29 17:58:13 发布

jsbome

最新推荐文章于 2020-11-29 17:58:13 发布

阅读量2.1k

点赞数

分类专栏： Highcharts 文章标签： Highchart 使用二维数组生成图表

本文链接：https://blog.csdn.net/jsbome/article/details/46967981

版权

本文介绍了如何使用Highcharts通过二维数组生成图表，包括columns和rows两种方式。重点讲解了columns结构，例如：[null, x值1, x值2,..., x值n, [数据列名1, y值1, y值2,..., y值n], [数据列名2, y值1, y值2,..., y值n], ...]。并给出了使用columns构建二维数组生成图表的核心代码示例。" 120632211,10909011,虚幻四引擎入门教程：初学者指南,"['游戏开发', '虚幻引擎', '3D建模', '初学者教程', '游戏引擎入门']

摘要由CSDN通过智能技术生成

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: {