gpt4 book ai didi

javascript - 谷歌图表呈现空图表添加行()错误

转载 作者:行者123 更新时间:2023-12-04 14:54:15 25 4
gpt4 key购买 nike

我有一个 JavaScript 数组,如下所示:

[
{x: "Station a", y: -77.33333333333333},
{x: "Station b", y: -19},
{x: "Station c", y: 9.492537313432836},
...
]

我想使用 Google Charts 创建条形图。下面的代码给我一个空图表……没有柱状图。 x 值应该是标签,y 值在图表中创建条形图。我是否必须手动将数组值推送到数据表中?如果是这样,这将如何完成?这是代码的摘录,n 是 JavaScript 数组:

// 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);

在我指定的 HTML header 中

<script src = "http://code.jquery.com/jquery-latest.js"></script>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

最佳答案

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);

};

关于javascript - 谷歌图表呈现空图表添加行()错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68441003/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com