Javascript 动态填充google列图表

我想填充一个动态柱状图，这样行和列都是动态的

下面是我要转换的json数组示例：

{“位置”：“链”，“项目类别”：“A”，“延迟”：“681”}，
{“地点”：“钦奈”，“物资类别”：“A”，“延迟”：“286”}，{“地点”：“巴瓦尔”，“物资类别”：“A”，“延迟”：“339”}，{“地点”：“哈里瓦”，“物资类别”：“A”，“延迟”：“1256”}，{“地点”：“卢迪亚纳”，“物资类别”：“A”，“延迟”：“1048”}，{“地点”：“巴瓦尔”，“物资类别”：“B”，“延迟”：“1”

有3个参数，即位置、项目类别和延迟，其中：

位置表示列。（动态变化）

延迟范围应在Y轴上。（动态变化）

在x轴上，它们使用项目进行映射

到目前为止，我能够获取所有必需的数据，但无法从中创建图形。我提到了各种库，如

googlevisualization

，

Pchart

，

JPGraph

等等

每次我都冻结在动态填充图形上

以下是填充Google柱形图的示例代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Item Category', 'Location 1', 'Location 2', 'Location 3,...'],
          ['item1', 1000, 400, 200,...delay value of location 'n'],
          ['item2', 1170, 460, 250,...],
          ['item3', 660, 1120, 300]...],
          ['item4', 1030, 540, 350]
          .
          . 
        ]);

这些是我提到的链接。我想在javascript中动态填充这个

数据
变量


首先，需要将json数据转换为普通数组

然后使用数据视图为每个类别创建一列

然后汇总数据并绘制图表


google.charts.load（'current'{
回调：函数（）{
var jsonData=[
{“位置”：“链”，“项目类别”：“A”，“延迟”：“681”}，
{“地点”：“钦奈”，“物品类别”：“A”，“延迟”：“286”}，
{“地点”：“Bawal”，“物品类别”：“A”，“延迟”：“339”}，
{“地点”：“哈里瓦”，“物品类别”：“A”，“延迟”：“1256”}，
{“地点”：“卢迪亚纳”，“物品类别”：“A”，“延迟”：“1048”}，
{“地点”：“Bawal”，“物品类别”：“B”，“延迟”：“100”}
];
//负荷图数据
var chartData=[]；
forEach（函数（行，行索引）{
//列标题
var columns=Object.keys（行）；
如果（行索引===0）{
chartData.push（列）；
}
//行值
var chartRow=[]；
columns.forEach（函数（column，colIndex）{
var chartCell=行[列]；
如果（colIndex>1）{
chartCell=parseFloat（chartCell）；
}
chartRow.push（chartCell）；
});
chartData.push（chartRow）；
});
var data=google.visualization.arrayToDataTable（chartData）；
//创建数据视图
var view=newgoogle.visualization.DataView（数据）；
//初始化列数组
var aggColumns=[]；
var viewColumns=[0]；
//为每个类别生成视图和agg列
data.getDistinctValues（1）.forEach（函数（类别，索引）{
//添加视图列
viewColumns.push({
计算：函数（dt，行）{
如果（dt.getValue（第1行）==类别）{
返回dt.getValue（第2行）；
}
返回null；
},
标签：类别，
键入：“数字”
});
//添加agg列
推({
聚合：google.visualization.data.sum，
列：索引+1，
标签：类别，
键入：“数字”
});
});
//设置视图列
view.setColumns（viewColumns）；
//agg视图
var group=google.visualization.data.group(
看法
[0],
聚合柱
);
var chart=new google.charts.Bar（document.getElementById（'chart_div'）；
//使用组数据绘制图表
图.画（组）；
},
套餐：['bar']
});

@lonut我也这么做了，但是代码不起作用，因为行和列都在动态变化。我想要两个图表。我使用相同的代码。因此，上一张图表将消失。知道为什么吗@是否有单独的
元素和
图表
变量？
        var chart = new google.charts.Bar(document.getElementById('my_Chartid'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }