迭代json对象绘制柱形图？ [英] Iterating over json object for drawing a column chart?

问题描述

我使用

I use,

google.load('visualization', '1', {'packages': ['columnchart']});
//google.setOnLoadCallback(drawChart);
function drawChart(response) {
    alert(response.customerlist);
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'dbZipcode');
    data.addColumn('string', 'countusers');
    data.addRows(response.customerlist.length);
    for (var i = 0; i < response.customerlist.length; i++) {
        data.setValue(i, 0, response.customerlist[i].dbZipcode);
        data.setValue(i, 1, response.customerlist[i].countusers);
    }
    var container = document.getElementById('spnChart');
    container.innerHTML = "";
    var chart = new google.visualization.ColumnChart(container); 
    chart.draw(data, {width: 800, height: 300, is3D: true, title: 'Page Views',
                      legend:'none', titleX:'ZipCode', titleY:'Total Users'});
}

但是我的图表不包含绘制的图形。任何建议。

But my chart doesn't contain the drawn graph. Any suggestion.

和我的json数据

and my json data,

{
    "customerlist": [
        { "dbZipcode": "21313213",     "countusers": "1" },
        { "dbZipcode": "2313213",      "countusers": "1" },
        { "dbZipcode": "23324324",     "countusers": "1" },
        { "dbZipcode": "2342432",      "countusers": "1" },
        { "dbZipcode": "32424422343",  "countusers": "1" },
        { "dbZipcode": "324324324",    "countusers": "1" },
        { "dbZipcode": "324324324324", "countusers": "1" },
        { "dbZipcode": "3244324",      "countusers": "1" },
        { "dbZipcode": "3422344",      "countusers": "1" },
        { "dbZipcode": "342424324",    "countusers": "1" },
        { "dbZipcode": "3424324",      "countusers": "1" },
        { "dbZipcode": "435345",       "countusers": "1" },
        { "dbZipcode": "627028",       "countusers": "1" },
        { "dbZipcode": "641030",       "countusers": "2" },
        { "dbZipcode": "642582",       "countusers": "1" }
    ]
}

推荐答案

p>

Just change,

data.addColumn('number', 'countusers');
    data.addRows(response.customerlist.length);
    for (var i = 0; i < response.customerlist.length; i++) {
        data.setValue(i, 0, response.customerlist[i].dbZipcode);
        data.setValue(i, 1, response.customerlist[i].countusers-0);
    }

这篇关于迭代json对象绘制柱形图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！