时间戳

首页 > 解决方案 > 谷歌图表的问题，错误的百分比

javascript - 谷歌图表的问题，错误的百分比

问题描述

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

这是我的代码

<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>

标签： javascriptgoogle-apps-scriptgoogle-visualization

解决方案

问题：

HtmlInputElement的value返回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>

推荐阅读