使用Google Chart API和JSON for DataTable创建折线图

Question

使用Google Chart API和JSON for DataTable创建折线图

javascriptjsonchartsgoogle-visualization

4

我正在尝试使用Google Chart API创建一条折线图。我正在使用JSON通过AJAX提交设置数据表格的数据。

我已经为饼图创建了一个版本，但是我不知道如何为折线图做到这一点。

以下是我使用AJAX提交创建图表的方式。

function drawLineGraph()
             {
                 $.post("loadGraph.php",
                    {
                        type: "line"
                    },
                    function (result)
                    {
                        var data = new google.visualization.DataTable(result);
                        var options = {
                            title: "Line Graph Test"
                        };

                        var chart = new google.visualization.LineChart(document.getElementById("lineChart"));
                        chart.draw(data, options);
                    }, "json"
                );
             }

以下是loadGraph.php的代码。

print json_encode(test());

    function test()
    {
        $array = array();
        if ($_POST['type'] == "line")
        {
            $array['cols'][] = array('type' => 'string');
            $array['cols'][] = array('type' => 'number');

            $temp = array();
            $array['row'][] = array('v' => (string) "20-01-13");
            $array['row'][] = array('v' => (int) 35);
            $array['row'][] = array('v' => (string) "21-01-13");
            $array['row'][] = array('v' => (int) 30);

        }
}

虽然没有出现错误，但是折线图似乎被正常显示，但是没有线条，就像数据为0一样。下面是图表的屏幕截图：

Line chart not working

下面是JSON内容的输出。

{"cols":[{"type":"string"},{"type":"number"}],"row":[{"c":[{"v":"20-01-13"},{"v":22}]},{"c":[{"v":"21-01-13"},{"v":24}]},{"c":[{"v":"22-01-13"},{"v":27}]}]}

感谢您能提供的任何帮助。

更新：我尝试按照@davidkonrad建议的做法，但现在遇到了不同的问题。我已经将PHP数组中row的定义更改为rows，如下所示：

    $array['cols'][] = array('type' => 'string');
    $array['cols'][] = array('type' => 'number');

    $array['rows'][] = array('c' => "20-01-13");
    $array['rows'][] = array('v' => 35);
    $array['rows'][] = array('c' => "21-01-13");
    $array['rows'][] = array('v' => 30);

但是现在当图表加载时，我得到了“Cannot read property '0' of undefined”，应该显示图表的位置。

以下是目前生成JSON的方式。

{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":"20-01-13"},{"v":35},{"c":"21-01-13"},{"v":30}]}

我不知道如何更改数组以使其与Davidkonrad提供的JSON匹配

- Boardy

请问您能否提供一下您的PHP生成的JSON数据的示例？ - Sergey G

@SergeyG 我已经添加了JSON输出。 - Boardy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidkonrad · Accepted Answer

问题是一个非常小的拼写错误。在JSON中，row 应该改成 rows。

例如，将示例JSON更改为：

var result = { "cols":[ {"type":"string"}, {"type":"number"}], "rows":[ {"c":[{"v":"20-01-13"}, {"v":22}]}, {"c":[{"v":"21-01-13"}, {"v":24}]}, {"c":[{"v":"22-01-13"}, {"v":27}]} ]};

你的代码可运行：在此输入图像描述

更新

请参阅构造函数JavaScript字面数据参数的格式。需要将每个“c”部分用括号括起来，并且对于第一列也遗漏了“v”（值指示器）。

你更新后的测试JSON为

"cols": [
    {"type":"string"},{"type":"number"}
        ],
"rows":[
    {"c":"20-01-13"},{"v":35},
    {"c":"21-01-13"},{"v":30}
        ]
}

出现“无法读取未定义的对象”的错误，因为它应该是

{
"cols":[
    {"type":"string"},{"type":"number"}
    ],
"rows":[
    {"c": [{ "v": "20-01-13"},{"v":35} ]},
    {"c": [{ "v": "21-01-13"},{"v":30} ]}
    ]
}

图表：

图片描述

希望对你有所帮助！

最终更新

修改了PHP代码，使其与json_encode一起以正确的谷歌图表格式输出数据：

function test() {
    $array = array();

    $array['cols'][] = array('type' => 'string');
    $array['cols'][] = array('type' => 'number');

    //HERE you have the difference
    $array['rows'][]['c'] = array(
        array('v' => "20-01-13"),
        array('v' => 35)
    );
    $array['rows'][]['c'] = array(
        array('v' => "21-01-13"),
        array('v' => 30)
    );

    return json_encode($array);
}

输出

{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":[{"v":"20-01-13"},{"v":35}]},{"c":[{"v":"21-01-13"},{"v":30}]}]}

导致上面的图表