如何通过JSON对象为ColumnChart创建DataTable? [英] How to create DataTable for ColumnChart by JSON object?

问题描述

我正在尝试为Google可视化api中的ColumnChart创建一个以JSON作为参数的DataTable.

I'm trying to create a DataTable, with JSON as parameter, for a ColumnChart from the Google visualization api.

我生成了以下JSON对象:

I generated the following JSON object:

{
    "cols": [
        {"id":"date", "label":"date","pattern":"", "type":"date"},
        {"id":"jobsonstatus", "label":"jobsonstatus", "pattern":"", "type":"number"}
    ],
    "rows": [
        {
            "c": [
                {"v": "01-02-2013", "f": null},
                {"v": 128, "f": null}
            ]
        },
        {
            "c": [
                {"v": "08-02-2013", "f": null},
                {"v": 185, "f": null}
            ]
        },
        {
            "c": [
                {"v": "15-02-2013", "f": null},
                {"v": 142, "f": null}
            ]
        },
        {
            "c": [
                {"v": "22-02-2013", "f": null},
                {"v": 86, "f": null}
            ]
        }
    ]
}

这是怎么了?

也许是别的东西.其余代码为:

Maybe it's something else. The rest of the code is:

    var chart;      //The chart
var options;    //The options for the chart
var data;       //The data inside the chart

//This function will set up the actual chart but doesn't draw it.           
function init(){
    chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    options = {
        width:600, height:450,      
        legend: {'position': 'top'},
        allowHtml: true
    };                      
}

function changeData(dataPar){
    data = new google.visualization.DataTable(dataPar);
    drawChart();                  
}

function drawChart(){   
    chart.draw(data, options);
}                   

将JSON对象引发到changeData()函数中.

The JSON object is thrown in the function changeData().

我已经在ajax部分得到了这个

And i've got this in the ajax part:

    dataType: "json",       
    success: function(res, textStatus, jqXHR){
       changeData(res);
    }

我遇到红色背景错误:

a [dc]不是函数

a[dc] is not a function

有人知道出了什么问题吗?应该怎么解决?

Does anybody know what's going wrong and what should be the solution?

推荐答案

好的，我自己弄清楚了.

Allright, I figured it out myself.

在cols中，我已将"date"列的类型设置为date，但它必须是字符串，因为给定的值是字符串.

In the cols I had set the type of the column "date" to date but it had to be a string because the given value is a string.

因此，如果您从 google可视化图表中遇到奇怪的错误，那么 JSONLint 似乎对您的json部分有误.

So if you get strange errors from the google visualization charts then you probably have an error in your json part wich seems to be valid by JSONLint.

我建议调试json部分的方法是，首先使用addColumn()和addRows()函数制作一个虚拟DataTable，然后执行

My suggestion to debug the json part is to first make a dummy DataTable by using the functions addColumn() and addRows() and then do

console.log([DataTable var].toJSON()).

将此输出与您使用先前的脚本创建的JSON进行比较并进行调试.

Compare this output with the JSON you've created with your previous script and debug.

我有以下JSON对象:

I've got the following JSON object:

{
    "cols": [
        {"id": "date", "label": "date","pattern": "","type": "string"},
        {"id": "newjobs","label": "newjobs","pattern": "","type": "number"}
    ],
    "rows": [
        {"c": [
                {"v": "01-02-2013","f": null},
                {"v": 132,"f": null}
            ]},
        {"c": [
                {"v": "08-02-2013","f": null},
                {"v": 78,"f": null}
            ]},
        {"c": [
                {"v": "15-02-2013","f": null},
                {"v": 105,"f": null}
            ]
        },
        {"c": [
                {"v": "22-02-2013","f": null},
                {"v": 8,"f": null}
            ]}
    ]
}

这篇关于如何通过JSON对象为ColumnChart创建DataTable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！