gpt4 book ai didi

javascript - 准备动态数据以通过 Google Chart API 显示

转载 作者:行者123 更新时间:2023-12-03 08:22:27 24 4
gpt4 key购买 nike

我有大量数据通过 API 以 JSON 字符串形式传入,如下所示:

someData1: {0: {_id: {date: "2015-11-11"}, count: 1}, length: 1}
0: {_id: {date: "2015-11-11"}, count: 1}
_id: {date: "2015-11-11"}
date: "2015-11-11"
count: 1
length: 1
someData2: {0: {_id: {date: "2015-11-12"}, count: 5}, 1: {_id: {date: "2015-11-11"}, count: 3}, length: 2}
0: {_id: {date: "2015-11-12"}, count: 5}
_id: {date: "2015-11-12"}
count: 5
1: {_id: {date: "2015-11-11"}, count: 3}
_id: {date: "2015-11-11"}
date: "2015-11-11"
count: 3
length: 2
someDataN: ...

但是,我需要将此数据显示在 Google 图表(确切地说是面积图)中。

据我了解,在 Google 图表中,第一列可以是日期/字符串,其余的必须是数字,因此我在格式化数据以使其可用于 Google 图表时遇到困难.

因此,在我的例子中,someData1someData2 必须是列,基本上位于第一个 date 列之后。

所以列将是:[date, someData1, someData2]

  1. 显然第一列带有日期。在这种情况下,如何使用我提供的对象中的日期?
  2. 如何使用上面的数据作为示例,在自己的中创建行?

在这种情况下设置列很容易,但设置行却让我感到困惑。如何确保 someData1count 位于 someData1 列下方,依此类推?

我如何重组这个对象以使其满足我的需要?

谢谢。

最佳答案

我编写了一个 JavaScript 函数来完成这件事:

var GenerateChart = function(element, columns, data, title, type) {
var dataArr = [];

for (var i = 0; i < data.length; i++) {
var cell = [];
for (var n = 0; n < data[i].length; n++) {
if (n === 0) {
cell.push(data[i][n]);
} else {
cell.push(parseInt(data[i][n], 10));
}

}
dataArr.push(cell);
}
var data = new google.visualization.DataTable();

for (var i = 0; i < columns.length; i++) {
if (i === 0) {
data.addColumn('string', columns[i].label);
} else {
data.addColumn('number', columns[i].label);
}
}
data.addRows(dataArr);

var options;
var chart;
switch (type) {
case 'line':
options = {
title: title,
curveType: 'function',
legend: {
position: 'bottom'
}
}
chart = new google.visualization.LineChart(element);
break;
case 'bar':
options = {
title: title,
trendlines: {
0: {}
},
legend: {
position: 'bottom'
},
}
chart = new google.visualization.ColumnChart(element);
break;
case 'pie':
options = {
title: title
}
chart = new google.visualization.PieChart(element);
break;
case 'bubble':
var hAxis;
var vAxis;
for (var i = 0; i < 3; i++) {
if (i === 1) {
hAxis = columns[i].label;
} else if (i === 2) {
vAxis = columns[i].label;
}
}
options = {
title: title,
hAxis: hAxis,
vAxis: vAxis,
buble: {
textStyle: {
fontSize: 11
}
}
}
chart = new google.visualization.BubbleChart(element);
break;
}
chart.draw(data, options);
}

您只需要在 switch 语句中添加一个“area”大小写即可。但是,他们的大多数图表都使用非常相似的 json 结构进行处理。您可以像这样调用上面的函数:

var element = document.getElementById('graph');
var columns = result[key].columns;
var data = result[key].data;
GenerateChart(element, columns, data, "Graph Title", "area");

上面的“结果”变量将是您的 json 对象。我将很快给出一个用于上述函数的 json 对象的示例。条形图示例:

{
"title":"Feeds Today",
"type":"bar",
"columns":[
{"label":"Feed Type"},
{"label":"Successes"},
{"label":"Fails"}],
"data":[
["ListHub","507",2],
["Reliance","270",0],
["Realogy","88",0],
["DDF","36",0],
["RETS","231",7],
["IDX","23",0],
["XML","26",3]]
}

关于javascript - 准备动态数据以通过 Google Chart API 显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33694190/

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