zoukankan      html  css  js  c++  java
  • Highcharts使用二维数组生成图表

    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中。
  • 相关阅读:
    mysql 导入导出
    spring3.1 profile 配置不同的环境
    <context:annotation-config />和 <context:component-scan
    NPM 使用介绍
    产品每生产一个消费一个
    通过Lock对象以及Condition对象实现多线程同步
    Spring定时任务的几种实现
    详解java定时任务
    设计模式-享元模式
    堆栈简析
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/7245863.html
Copyright © 2011-2022 走看看