如何为JSON文件中的每个对象声明变量？

Question

我有一个data.json文件，其中包含4个对象：a，b，c，d。

---

手动地

我手动声明了变量。

var chart_a = new google.visualization.PieChart(document.getElementById('sa-piechart-a'));
var chart_b = new google.visualization.PieChart(document.getElementById('sa-piechart-b'));
var chart_c = new google.visualization.PieChart(document.getElementById('sa-piechart-c'));
var chart_d = new google.visualization.PieChart(document.getElementById('sa-piechart-d'));  

---

动态地

现在，我想动态创建它，以便它可以处理JSON文件中的所有对象，并且不会中断-当我向JSON文件中添加更多对象时。

因此，在循环中，我尝试添加：

chart[object] = new google.visualization.PieChart($('#sa-piechart-'+ object.toLowerCase() )); // <---- I try to add this line

---

我从Ajax电话获得了对象。

var data = {};
var chart = {};

for (var object in objects) {

  var total = objects[object].danger + objects[object].warning + objects[object].success ;


  data[object] = google.visualization.arrayToDataTable([

    ['Piechart' , 'Number of Skills'],
    ['danger'   , ( objects[object].danger/total )  * 100  ],
    ['warning'  , ( objects[object].warning/total ) * 100  ],
    ['success'  , ( objects[object].success/total ) * 100  ],

    ]);

   //console.log( '#sa-piechart-' + object.toLowerCase() ); // Return #sa-piechart-a  

   chart[object] = new google.visualization.PieChart($('#sa-piechart-'+ object.toLowerCase() )); // <---- I try to add this line

}

// var chart_a = new google.visualization.PieChart(document.getElementById('sa-piechart-a'));
// var chart_b = new google.visualization.PieChart(document.getElementById('sa-piechart-b'));
// var chart_c = new google.visualization.PieChart(document.getElementById('sa-piechart-c'));
// var chart_d = new google.visualization.PieChart(document.getElementById('sa-piechart-d'));

---

结果

我不断收到Uncaught Error: Container is not defined

任何提示/建议将不胜感激！

---

更新资料

Answer 1

Container is not defined意味着未按注释中所述找到DOM元素。 您需要动态创建元素，然后将它们传递给Google饼图。 这样的事情应该做。

var el = document.getElementById('sa-piechart-' + object);
if (!el) {
  el = document.createElement('div');
  el.id = object;
  document.body.appendChild(el); // <--- I added to body. Add to required element
}
chart[object] = new google.visualization.PieChart(el); 
chart[object].draw(data[object]);

这是一个演示http://jsfiddle.net/6M2sH/443/

---

更好的解决方案（使用jQuery）

var $el = $('#sa-piechart-' + object).length ? $('#sa-piechart-' + object) : $('<div id="#sa-piechart-' + object+'"></div>').appendTo('body');
chart[object] = new google.visualization.PieChart($el[0]);

Fancier演示http://jsfiddle.net/6M2sH/444/