如何使用JSON文件在Javascript中制作动态图表

所以，我不熟悉Javascript，但我有一个代码来制作一个稳定的条形图，但我需要使它动态。 我的JSON文件格式是： “有效列数”：{ “Sr编号”：0， “域名”：37， “公司名称”：0， “地址”：36， “工业”：38， “电话号码”：30， “Zipcode”：33， “电子邮件”：14}

我运行了以下代码：

window.onload = function () {

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{

},
axisY: {
    title: "Percentage",
    titleFontColor: "#4F81BC",
},


toolTip: {
    shared: true
},
legend: {
    cursor:"pointer",
    itemclick: toggleDataSeries
},
data: 
{
    type: "column",
    name: "Consistency",
    legendText: "Consistency",
    axisYType: "secondary",
    showInLegend: true,
    dataPoints: dataPoints
}

});

function addData(data) {
  for (var i = 0; i < data.length; i++) {
    dataPoints.push({
      x: data[i].valid_columns_counts
  y: data[i].valid_columns_counts
});
 }
}
 
chart.render();
$.getJSON("localhost/sample_output.json", addData);

}

window.onload=函数（）{
var数据点=[]；
var chart=new CanvasJS.chart（“chartContainer”{
animationEnabled：没错，
标题：{
},
axisY：{
标题：“百分比”，
标题字体颜色：“4F81BC”，
},
工具提示：{
分享：真的
},
图例：{
光标：“指针”，
itemclick:toggleDataSeries
},
数据：
{
键入：“列”，
名称：“一致性”，
传奇文本：“一致性”，
axisYType:“次要”，
showInLegend：是的，
数据点：数据点
}
});
函数addData（数据）{
对于（变量i=0；i

---

但此代码在运行时显示空白页。如果有人能帮助我，请告诉我。

有控制台错误吗？没有，没有控制台错误