- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在 Google Charts 中创建一个柱形图,并且还想创建一个表格图表,显示基于列值的摘要数据,即。平均值、最小值、最大值、总计。
我已在drawchart函数外部将它们声明为全局变量(初始化为0),并在drawchart函数内分配了值(不带var):
function drawPower() {
$.get("costs_daily.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
/// get min, max cost
var range = data.getColumnRange(3);
var n_rows = data.getNumberOfRows();
function getSum(data, row) {
var total = 0;
for (i = 0; i < n_rows; i++)
total = total + data.getValue(i, row);
return total;
}
totCost = getSum(data, 3);
aveCost = totCost / n_rows;
minCost = range.min;
maxCost = range.max;
var options = {
title: 'Costs for last 30 days',
titleTextStyle: {color: 'grey', fontSize: 16},
hAxis: {title: 'Date', titleTextStyle: {bold: false, italic: false, color: 'grey'}, slantedTextAngle: 90, textStyle: {fontSize: 12}},
legend: {position: 'top'},
vAxes: {
0: {title: 'Cost (p)', titleTextStyle: {bold: false, italic: false, color: 'grey'}},
},
focusTarget: 'category',
intervals: {color:'#000000',
textStyle: { color: 'none'}},
series: {
0: {color: '#44AA99', type: 'bars'},
1: {color: '#DDCC77', type: 'bars'},
2: {
color: 'transparent',
type: 'line',
lineWidth: 0,
pointSize: 0,
enableInteractivity: false,
visibleInLegend: false
}
},
interpolateNulls: true,
bar: { groupWidth: '75%' },
isStacked: true,
};
var formatter = new google.visualization.NumberFormat(
{prefix: '£', fractionDigits: 2}
);
formatter.format(data,1);
formatter.format(data,2);
formatter.format(data,3);
var chart = new google.visualization.ComboChart(document.getElementById('power_div'));
chart.draw(data, options);
},'text');
}
然后我创建了一个单独的函数来绘制包含这些值的表格:
function drawTable() {
statsData = [
['Stat', 'Cost'],
['Average', aveCost],
['Minimum', minCost],
['Maximum', maxCost],
['Total', totCost]
];
var stats = new google.visualization.arrayToDataTable(statsData);
var options = {
showRowNumber: false,
width: '100%',
height: '100%'
};
var formatter = new google.visualization.NumberFormat(
{prefix: '£', fractionDigits: 2}
);
formatter.format(stats,1);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(stats, options);
}
但这些值仍保持其初始值(零)。有没有办法将计算值从图表函数传递到表格函数?
最佳答案
不确定从现在开始在哪里调用 drawTable
,
但是,是的,您可以将图表函数中的值传递到表函数。
在图表函数中创建statsData
,
然后将其传递给表函数。
并删除当前正在调用表函数的位置。
totCost = getSum(data, 3);
aveCost = totCost / n_rows;
minCost = range.min;
maxCost = range.max;
statsData = [
['Stat', 'Cost'],
['Average', aveCost],
['Minimum', minCost],
['Maximum', maxCost],
['Total', totCost]
];
drawTable(statsData);
...
function drawTable(statsData) {
...
请参阅以下代码片段...
函数绘制功率(){ $.get("costs_daily.csv", function(csvString) { //将 CSV 字符串转换为二维数组 var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
/// get min, max cost
var range = data.getColumnRange(3);
var n_rows = data.getNumberOfRows();
function getSum(data, row) {
var total = 0;
for (i = 0; i < n_rows; i++)
total = total + data.getValue(i, row);
return total;
}
totCost = getSum(data, 3);
aveCost = totCost / n_rows;
minCost = range.min;
maxCost = range.max;
statsData = [
['Stat', 'Cost'],
['Average', aveCost],
['Minimum', minCost],
['Maximum', maxCost],
['Total', totCost]
];
drawTable(statsData);
var options = {
title: 'Costs for last 30 days',
titleTextStyle: {color: 'grey', fontSize: 16},
hAxis: {title: 'Date', titleTextStyle: {bold: false, italic: false, color: 'grey'}, slantedTextAngle: 90, textStyle: {fontSize: 12}},
legend: {position: 'top'},
vAxes: {
0: {title: 'Cost (p)', titleTextStyle: {bold: false, italic: false, color: 'grey'}},
},
focusTarget: 'category',
intervals: {color:'#000000',
textStyle: { color: 'none'}},
series: {
0: {color: '#44AA99', type: 'bars'},
1: {color: '#DDCC77', type: 'bars'},
2: {
color: 'transparent',
type: 'line',
lineWidth: 0,
pointSize: 0,
enableInteractivity: false,
visibleInLegend: false
}
},
interpolateNulls: true,
bar: { groupWidth: '75%' },
isStacked: true,
};
var formatter = new google.visualization.NumberFormat(
{prefix: '£', fractionDigits: 2}
);
formatter.format(data,1);
formatter.format(data,2);
formatter.format(data,3);
var chart = new google.visualization.ComboChart(document.getElementById('power_div'));
chart.draw(data, options);
},'text');
}
function drawTable(statsData) {
var stats = new google.visualization.arrayToDataTable(statsData);
var options = {
showRowNumber: false,
width: '100%',
height: '100%'
};
var formatter = new google.visualization.NumberFormat(
{prefix: '£', fractionDigits: 2}
);
formatter.format(stats,1);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(stats, options);
}
关于javascript - 从 Google Charts 中的柱形图创建汇总表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60178289/
我的数据库中有 4 个表。 2012,2013,2014,2015. 每一个都是这样布置的: 我想对每年的每个 StartStation 求和: StartStation 2012
您建议使用哪种方法,为什么? 创建汇总表和 . . . 1) 实时更新表格。 2) 每 15 分钟运行一次 group by 查询以更新汇总表。 3) 还有别的吗? 数据必须接近实时,不能等一个小时、
我正在尝试使用来自 python 的 pandas 的 .describe() 创建一个汇总表。 我有以下数据框: df = pd.DataFrame({'Group':['Group1', 'Gro
我在 pandas 中得到了下表: x 是 1 1 2 3 2 5 2 4 1 4 1 5 我想看看变量x的模式,所以我想看看模式是什么。 在表格中,您会看到 x=1 然后 x=2 三次,然后返回
我有一个数据库,其中有许多具有关系的表中的数据 TABLE Cars (stock) --------------------- Model colourid Doors --------
我正在尝试对列表求和,但跳过第一个偶数,然后继续添加列表的其余部分,包括其余的偶数,但我似乎不太正确。 list = [-3, -7, -1, 0, 1, 2, 3, 4, 5, 6, 7] def
我正在开发一个我需要创建和维护的项目 汇总表 出于性能原因。我相信正确的术语是 物化 View . 我有两个主要原因这样做: 非规范化 我尽可能地对表格进行了标准化。所以在某些情况下,我必须加入许多表
我有两个表,表 A 有列 token(主键)和 停机时间(INT),表 B 有列 token, status(ENUM 有 3 种状态:active, unstable, inactive ), du
我正在使用包 purrr 和 broom 来生成一系列 glm 并构建一个包含模型信息的表格,以便我可以比较它们。 当我从 purrr 调用 map 函数时,代码失败。我认为问题与 mutate 和
我是一名优秀的程序员,十分优秀!