проблема с гугл чартом, неправильный процент - PullRequest
Новая
       58

проблема с гугл чартом, неправильный процент

1 голос
/ 06 апреля 2020

Когда гугл-чарт получает второй параметр (значение), на графике отображаются неверные проценты !!!

Это мой код 

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

Ответы [ 2 ]

2 голосов
/ 06 апреля 2020

Выпуск:

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>
0 голосов
/ 06 апреля 2020

Вам просто нужно привести значения в виде чисел, а не строк.

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>

Изображение:

enter image description here

...