gpt4 book ai didi

javascript - 如何将总计添加到谷歌图表中的图表

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

我想将总金额添加到下表中。

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/

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