我想将总金额添加到下表中。
https://jsfiddle.net/porterhouse47/6e0ejxLb/
我创建了一个函数来对值求和，如果取消注释警报，您会发现它是正确的。我尝试为总计添加一个新行，如您在底部看到的那样，但它没有显示。
// Load Charts and the corechart/bar char package.
google.charts.load('current', {
packages: ['corechart']
});
// Draw the pie chart for the Total Costs when Charts is loaded.
google.charts.setOnLoadCallback(drawPieChart);
// Draw the pie
function drawPieChart() {
var data = google.visualization.arrayToDataTable([
['Country', 'Dollars'],
['Canada', 12250000],
['USA', 22750000]
]);
function getSum(data, column) {
var total = 0;
for (i = 0; i < data.getNumberOfRows(); i++)
total = total + data.getValue(i, column);
return total;
}
//alert(getSum(data, 1));
// In order to show currency correctly
var formatter = new google.visualization.NumberFormat({
negativeColor: 'red',
negativeParens: true,
pattern: '$###,###'
});
formatter.format(data, 1);
var options = {
title: "North America 2017",
legend: {
position: 'top'
},
pieSliceText: 'value-and-percentage',
slices: {
0: {
color: '#328213'
},
1: {
offset: 0.1,
color: '#57a33a'
},
},
pieStartAngle: 70,
width: 400,
height: 300
};
var chart = new google.visualization.PieChart(document.getElementById('total_costs_pie'));
chart.draw(data, options);
addRow('Total', getSum(data, 1));
}<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
</script>
<body>
<!--Table and divs that hold the pie charts-->
<table class="columns">
<tr>
<td>
<div id="total_costs_pie" style="border: 1px solid #ccc"></div>
</td>
</tr>
</table>最佳答案
嗨，我有一个可能的解决方案给你:
HTML:
</script>
<body>
<!--Table and divs that hold the pie charts-->
<table class="columns">
<tr>
<td>
<div id="total_costs_pie" style="border: 1px solid #ccc"></div>
</td>
</tr>
<tr>
<td id="total"></td>
<td id="number"></td>
</tr>
</table>
JAVASCRIPT:
// Load Charts and the corechart/bar char package.
google.charts.load('current', {
packages: ['corechart']
});
// Draw the pie chart for the Total Costs when Charts is loaded.
google.charts.setOnLoadCallback(drawPieChart);
// Draw the pie
function drawPieChart() {
var data = google.visualization.arrayToDataTable([
['Country', 'Dollars'],
['Canada', 12250000],
['USA', 22750000]
]);
function getSum(data, column) {
var total = 0;
for (i = 0; i < data.getNumberOfRows(); i++)
total = total + data.getValue(i, column);
return total;
}
//alert(getSum(data, 1));
// In order to show currency correctly
var formatter = new google.visualization.NumberFormat({
negativeColor: 'red',
negativeParens: true,
pattern: '$###,###'
});
formatter.format(data, 1);
var options = {
title: "North America 2017",
legend: {
position: 'top'
},
pieSliceText: 'value-and-percentage',
slices: {
0: {
color: '#328213'
},
1: {
offset: 0.1,
color: '#57a33a'
},
},
pieStartAngle: 70,
width: 400,
height: 300
};
var chart = new google.visualization.PieChart(document.getElementById('total_costs_pie'));
chart.draw(data, options);
//function for addRow.....
function addRow (name, number) {
//add name and number to .total
total_name = document.createTextNode(name + number);
total.appendChild(total_name);
}
addRow('Total: ', getSum(data, 1));
}
我为你的addRow添加了函数。以及新的 tr 和 td 来嵌入此属性。我希望这对您有帮助或为您提供做类似事情的途径；)
关于javascript - 如何将总计添加到谷歌图表中的图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44159990/