如何解决谷歌图表呈现空图表 addRows() 错误
const a: A = ...
const b0: B = ...
const b1: B = ...
f(a,b0,b1) // Fine
f(b0,a,b1,a) // Still fine
f(b0,b1) // works but I don't want it to work because I need f to accept at least one argument which has a type A
我希望使用 Google Charts 创建条形图。下面的代码给了我一个空图表......没有条形图。 x 值应该是标签,y 值在图表中创建条形。 我是否必须手动将数组值推送到数据表中?如果是这样,这将如何完成? 这是代码的摘录,n 是 JavaScript 数组:
[
{x: "Station a",y: -77.33333333333333},{x: "Station b",y: -19},{x: "Station c",y: 9.492537313432836},...
]
在我指定的 HTML 标题中
// load necessary google charts libraries
google.charts.load("visualization","1",{'packages':["corechart"]});
google.charts.load('current',{'packages':['bar']});
function plot1() {
var dataPoints = []; // temporary array
var n = []; // final array with data
var chartData = new google.visualization.DataTable();
chartData.addColumn('string','Station');
chartData.addColumn('number','Arrival');
n.forEach(function (row) {
chartData.addRow([row.x,row.y]);
});
url = // localhost url with json data
// push json data to array
function addData(data) {
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].delays.length; j++) {
dataPoints.push({
x: data[i].delays[j].Station,y: data[i].delays[j].Arrival
});
}
}
// filter "no information" values from array
values = ["no information"]
dataPoints = dataPoints.filter(item => !values.includes(item.y));
// eliminate duplicates of x and get average of the y values
const map = new Map();
dataPoints.forEach(({ x,y }) => {
const [total,count] = map.get(x) ?? [null,0];
map.set(x,[(total ?? 0) + parseInt(y),count + 1]);
});
// final array with data in desired format
n = [...map].map(([k,v]) => ({ x: k,y: v[0] / v[1] }));
console.log(n);
}
$.getJSON(url,addData);
var options = {
width: 700,legend: { position: 'none' },chart: {
title: 'Verteilung der Verspätungen bei Ankunft (in Sekunden)'},axes: {
x: {
0: { side: 'top',label: 'Stationen'} // Top x-axis.
}
},bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('plot1'));
chart.draw(chartData,google.charts.Bar.convertOptions(options));
};
google.charts.setonLoadCallback(plot1);
解决方法
arrayToDataTable
需要一个简单的二维数组,只有内在值。
以列标题作为第一行。
var data = google.visualization.arrayToDataTable([
['Station','Arrival'],['Station a',-77.33333333333333],['Station b',-19],]);
您可以找到详细信息 here。
它返回完整的数据表,所以后面不需要使用addColumn
。
-- 或 --
您可以创建一个空白数据表,然后添加列和行。
var data = new google.visualization.DataTable();
data.addColumn('string','Station');
data.addColumn('number','Arrival');
n.forEach(function (row) {
data.addRow([row.x,row.y]);
});
编辑
$.getJSON
异步运行。所以你必须等到它完成,
在数据可用之前。
将循环移动到 addData
的末尾。
然后在数据准备好后绘制图表。
注意:您不需要第一个 load
语句。
看下面的片段...
google.charts.load('current',{
packages: ['bar']
}).then(plot1);
function plot1() {
var dataPoints = []; // temporary array
var n = []; // final array with data
var chartData = new google.visualization.DataTable();
chartData.addColumn('string','Station');
chartData.addColumn('number','Arrival');
url = // localhost url with json data
// push json data to array
function addData(data) {
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].delays.length; j++) {
dataPoints.push({
x: data[i].delays[j].Station,y: data[i].delays[j].Arrival
});
}
}
// filter "no information" values from array
values = ["no information"]
dataPoints = dataPoints.filter(item => !values.includes(item.y));
// eliminate duplicates of x and get average of the y values
const map = new Map();
dataPoints.forEach(({ x,y }) => {
const [total,count] = map.get(x) ?? [null,0];
map.set(x,[(total ?? 0) + parseInt(y),count + 1]);
});
// final array with data in desired format
n = [...map].map(([k,v]) => ({ x: k,y: v[0] / v[1] }));
console.log(n);
n.forEach(function (row) {
chartData.addRow([row.x,row.y]);
});
var options = {
width: 700,legend: { position: 'none' },chart: {
title: 'Verteilung der Verspätungen bei Ankunft (in Sekunden)'},axes: {
x: {
0: { side: 'top',label: 'Stationen'} // Top x-axis.
}
},bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('plot1'));
chart.draw(chartData,google.charts.Bar.convertOptions(options));
}
$.getJSON(url,addData);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。