Как сделать так, чтобы значения статических элементов Google Line Chart вместо статических чисел - PullRequest
Новая
       5

Как сделать так, чтобы значения статических элементов Google Line Chart вместо статических чисел

1 голос
/ 08 ноября 2019

В настоящее время я пытаюсь создать Google Chart, которая смоделирована на основе значений в определенных тегах div в HTML-документе.

в том виде, как оно есть, в документе есть несколько тегов, таких как: 

<div id="abc"> 11000 </div>
<div id="def"> 12500 </div>
<div id="ghi"> 17000 </div>

Я бы хотел, чтобы диаграмма Google ссылалась на эти значения как на ось Y.

Код Google Charts работает нормально так: 

    <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([
          ['Age', 'Current', 'Proposed'],
          ['25',  10000],
          ['35',  15170],
          ['45',  21660],
        ]);
        var options = {
          title: 'Balance Comparison',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(data, options);
      }
    </script>
 <div id="curve_chart" style="width: 900px; height: 500px"></div>

Я бынравится изменять массив таким образом, чтобы ссылаться на значения div. Я попытался сделать это и закончил с этим: 

function drawChart() {
            var y1 = document.getElementByID("abc")
            var y2 = document.getElementByID("def")
            var y3 = document.getElementByID("ghi")
            var data = google.visualization.arrayToDataTable([
              ['Age', 'Current'],
              ['25',  y1],
              ['35',  y2],
              ['45',  y3],
            ]);

Это, кажется, не работает, и я в растерянности относительно того, как заставить это работать.

1 Ответ

0 голосов
/ 08 ноября 2019

это будет работать, во-первых, пара вещей ...

javascript чувствителен к регистру, измените getElementByID на getElementById (обратите внимание на последнюю букву)

getElementById получаетэлемент, но вы хотите, чтобы содержимое элемента.
используйте innerHTML, чтобы получить содержимое. 

var y1 = document.getElementById('abc').innerHTML;

наконец, диаграммы Google ожидают число для значения y,
innerHTML возвращает строку.

используйте parseFloat для преобразования строки в число. 

parseFloat(y1)

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var y1 = document.getElementById('abc').innerHTML;
  var y2 = document.getElementById('def').innerHTML;
  var y3 = document.getElementById('ghi').innerHTML;

  var data = google.visualization.arrayToDataTable([
    ['Age', 'Current'],
    ['25',  parseFloat(y1)],
    ['35',  parseFloat(y2)],
    ['45',  parseFloat(y3)],
  ]);

  var options = {
    title: 'Balance Comparison',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="abc"> 11000 </div>
<div id="def"> 12500 </div>
<div id="ghi"> 17000 </div>
<div id="curve_chart"></div>
...