2016-11-17 2 views
1

Я пытаюсь создать char google с помощью моего json-объекта. я продолжаю получать сообщение об ошибке при запуске var data = new google.visualization.DataTable(Chartdata);График Google json error

См. мой код ниже, любая помощь будет принята с благодарностью.

var Addresses = JSON.parse('{"With Address": 45532627,"Without Address": 10845793}'); 
     var Age = JSON.parse('{"18-25": 2162586,"26-35": 9995883,"36-45": 9486158,"46-55": 8729677,"56-65": 6913371,"65+": 10545270}'); 
     var Cellphone = JSON.parse('{"With Cellphone": 21536203,"Without Cellphone": 34842217}'); 

     google.charts.load("current", {packages:["corechart"]}); 
     google.charts.setOnLoadCallback(drawChart(Addresses,'Addresses')); 
     google.charts.setOnLoadCallback(drawChart(Age,'Age')); 
     google.charts.setOnLoadCallback(drawChart(Cellphone,'Cellphone')); 

    function drawChart(Chartdata,name) {   
     var data = new google.visualization.DataTable(Chartdata); 

     var options = { 
     title: name, 
     pieHole: 0.4, 
     legend: 'left' 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById(name)); 
     chart.draw(data, options); 
    } 

ответ

1

первый, setOnLoadCallback предназначен для вызывается один раз, при загрузке страницы
также setOnLoadCallback ожидает ссылка на function, а не результат function

google.charts.setOnLoadCallback(drawChart);
VS.
google.charts.setOnLoadCallback(drawChart(Addresses,'Addresses'));

независимо, t он callback может быть добавлен в load заявление

google.charts.load("current", { 
    callback: function() { 
    drawChart(Addresses,'Addresses'); 
    drawChart(Age,'Age'); 
    drawChart(Cellphone,'Cellphone'); 
    }, 
    packages:["corechart"] 
}); 

следующий для того, чтобы создать DataTable непосредственно из JSON, он должен быть в определенном формате
найти здесь ->Format of the Constructor's JavaScript Literal data Parameter

иначе , вы можете загрузить таблицу вручную

см. следующий рабочий фрагмент ...

google.charts.load("current", { 
 
    callback: function() { 
 
    var Addresses = JSON.parse('{"With Address": 45532627,"Without Address": 10845793}'); 
 
    var Age = JSON.parse('{"18-25": 2162586,"26-35": 9995883,"36-45": 9486158,"46-55": 8729677,"56-65": 6913371,"65+": 10545270}'); 
 
    var Cellphone = JSON.parse('{"With Cellphone": 21536203,"Without Cellphone": 34842217}'); 
 

 
    drawChart(Addresses,'Addresses'); 
 
    drawChart(Age,'Age'); 
 
    drawChart(Cellphone,'Cellphone'); 
 
    }, 
 
    packages:["corechart"] 
 
}); 
 

 
function drawChart(Chartdata,name) { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Category'); 
 
    data.addColumn('number', 'Value'); 
 

 
    for (var key in Chartdata) { 
 
    if (Chartdata.hasOwnProperty(key)) { 
 
     data.addRow([ 
 
     key, 
 
     Chartdata[key] 
 
     ]); 
 
    } 
 
    } 
 

 
    var options = { 
 
    title: name, 
 
    pieHole: 0.4, 
 
    legend: 'left' 
 
    }; 
 

 
    var chart = new google.visualization.PieChart(document.getElementById(name)); 
 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="Addresses"></div> 
 
<div id="Age"></div> 
 
<div id="Cellphone"></div>

+0

Большое спасибо, что сортируется мою проблему вне – Arno4Jackie

Смежные вопросы