用多维PHP数组填充Google组合图表 - Populating Google combo chart with multidimensional PHP array

Populating Google combo chart with multidimensional PHP array

本文关键字：Google 组合图填充数组 PHP | 更新日期: 2023-09-27

我有一个php数组与学生的数据。它看起来像这样:

array(5) {
    ["question1"]=>
        array(30) {
            ["2014, 03, 02"]=>
                array(10) {
                    ["student1"]=>
                    int(54)
                    ["student2"]=>
                    int(43)
                    ... etc. ...
                    ["median"]=>
                    string(2) "49"
}

学生每天回答5个问题，从1到100。每天计算一个问题的所有答案的中值。答案和中位数的存储方式与上面一样。

现在我想用这些数据填充一个Google Charts组合图表，但是我就是不能让它工作。

我想可视化数据，x轴上是日期，y轴上是1-100的值，每个答案都是一个点。中值的数据应该显示为点上的曲线。每个问题的点和曲线应该有自己的颜色。

但是我被困住了。我不知道如何插入数据。我试过这种方法:

var jsonData = (<?= json_encode($data)?>);
var data = new google.visualization.arrayToDataTable(jsonData);

，但我只得到以下错误信息:

Uncaught Error: Not an array    format+da,default+da,ui+da,corechart+da.I.js:181
lda    format+da,default+da,ui+da,corechart+da.I.js:181
Gp    format+da,default+da,ui+da,corechart+da.I.js:183
drawChart    ?side=graf:4888

您需要更改数据的格式。可视化API需要表格格式的数据，其中x轴数据位于第一列，每个数据系列(一组带颜色的点)是它自己的数据列。您可以构造DataTable的json表示(用于DataTable构造函数)或数据数组的数组(用于arrayToDataTable函数)。

由于您已经使用了arrayToDataTable函数，因此您需要具有以下结构:

$data = array(
    array('Date', 'Question 1', array('type' => 'number', 'role' => 'interval', 'id' => 'Q1Median'), 'Question 2', array('type' => 'number', 'role' => 'interval', 'id' => 'Q2Median') /* repeat for other questions */),
    // format is array(date, q1 score, q1 median, q2 score, q2 median...)
    // set the median in the first row for the day, leave it null for all other rows
    array('2014, 03, 02', 54, 49, /* repeat for other questions */),
    array('2014, 03, 02', 43, null, /* repeat for other questions */),
    // repeat one row for each student for each day
);

中值设置在"interval"角色列中，您可以在图表选项中将其样式显示为曲线:

interval: {
    // use the column ID of an interval to set the options for that interval
    Q1median: {
        style: 'line'
    },
    Q2median: {
        style: 'line'
    }
    // etc...
}