google 图表有问题，百分比错误

Question

当google图表收到第二个参数（值）时，图表显示错误百分比！！！

这是我的代码

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([ 
['Name', 'values'],
[ document.getElementById('name1').value , document.getElementById('value1').value ],
[ document.getElementById('name2').value, document.getElementById('value2').value ],
]);
var options = {'title':' ', 'width':"100%", 'height':"80%"};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}</script>

和输入

<input type="text" name="name1" id="name1" value="employee 1"></input>
<input type="text" name="name2" id="name2" value="employee 2"></input>
<input type="text" name="value1" id="value1" value="25"></input>
<input type="text" name="value2" id="value2" value="75"></input>

Answer 1

您只需将值转换为数字而不是字符串。

gs:

function showDialog() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah3'), 'Test')
}

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>

  <input type="text" name="name1" id="name1" value="employee 1"/>
  <input type="text" name="name2" id="name2" value="employee 2"/>
  <input type="text" name="value1" id="value1" value="25"/>
  <input type="text" name="value2" id="value2" value="75"/>
  <div id="piechart"></div>
    <script>
    window.onload=function(){
      google.charts.setOnLoadCallback(drawChart);
    }
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Name', 'values'],
  [document.getElementById('name1').value , Number(document.getElementById('value1').value) ],
  [document.getElementById('name2').value, Number(document.getElementById('value2').value) ]
  ]);
  var options = {'title':'Title', 'width':"100%", 'height':"80%"};
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
google.charts.load('current', {'packages':['corechart']});

</script>
</body>
</html>

图片：

Answer 2

问题：

HtmlInputElement's value returns string 而不是 number，而饼图需要数字类型

解决方案：

将其转换为数字。

片段：

Number(document.getElementById('value2').value)

实时样本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
<style>
div{
 width: 400px;
 height: 400px;
}
</style>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([ 
    ['Name', 'values'],
    [ document.getElementById('name1').value ,Number( document.getElementById('value1').value) ],
    [ document.getElementById('name2').value, Number(document.getElementById('value2').value) ],
    ]);
  var options = {'title':'Pie chart ', 'width':"100%", 'height':"80%"};
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
  </script>
 </head>
  <body>
  <input type="text" name="name1" id="name1" value="employee 1"></input>
  <input type="text" name="name2" id="name2" value="employee 2"></input>
  <input type="text" name="value1" id="value1" value="25"onchange="drawChart()"></input>
  <input type="text" name="value2" id="value2" value="75" onchange="drawChart()"></input>
  <div id="piechart">Loading...</div>
  </body>
</html>

google 图表有问题，百分比错误

problem with google chart , wrong percentages

javascript

google-visualization

google-apps-script

问题：

解决方案：

片段：

实时样本：