使用 Google 图表动态数据
我需要使用动态数据绘制我的 Google 图表，因此我将其存储在一个变量中：
var rowData = "[ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]";
然后我将此变量传递到 Google 的函数中：
google.load('visualization', '1', { packages: ['orgchart'] });
//google.setOnLoadCallback(drawChart);
function drawChart(json) {
data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
rowData
]);
chart = new google.visualization.OrgChart(document.getElementById('orgChart'));
chart.draw(data, { allowHtml: true });
google.visualization.events.addListener(chart, 'select', selectHandler);
}
但是，这给了我一个“给定的每一行必须为 null 或数组” .'错误。如果我删除变量并直接传递数据，它就可以正常工作：
...
data.addRows(
[ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]
);
...
任何人都可以帮助告诉我这里发生了什么吗？提前致谢。
I require my Google chart to be drawn with dynamic data, so I'm storing it in a variable:
var rowData = "[ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]";
I'm then passing this variable into Google's function:
google.load('visualization', '1', { packages: ['orgchart'] });
//google.setOnLoadCallback(drawChart);
function drawChart(json) {
data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
rowData
]);
chart = new google.visualization.OrgChart(document.getElementById('orgChart'));
chart.draw(data, { allowHtml: true });
google.visualization.events.addListener(chart, 'select', selectHandler);
}
However, this gives me an 'Every row given must be either null or an array.' error. If I remove the variable and pass the data in directly, it works fine:
...
data.addRows(
[ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]
);
...
Can anyone help tell me what's going on here? Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在第一个示例中，数据是单个字符串，在第二个示例中，数据是数组和单个字符串/值的 JavaScript 结构。
在不知道动态数据来自哪里的情况下，很难推荐最佳实践，但您应该能够像这样删除最外面的引号并使其工作：
In your first example the data is a single string, in the second example your data is a JavaScript structure of arrays and individual strings / values.
Hard to recommend a best-practice without knowing where you're dynamic data is coming from, but you should be able to remove the outermost quotes like this and have it work:
通过用双引号括起来，rowData 变成字符串，而 API 需要数组。像这样使用它
By enclosing in double-quotes rowData becomes string while the API needs Array. Use it like this