Массив данных Google Charts из входных значений javascript - PullRequest
Новая
       60

Массив данных Google Charts из входных значений javascript

1 голос
/ 02 мая 2020

У меня проблема с созданием диаграмм с помощью Google. На моей странице нужно выбрать правильный массив, исправить его с помощью входного значения и затем показать его на линейном графике. Код сценария: 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type = "text/javascript" src = "prototype.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback();
    function fixArray(){
        var array_0 = [['Day', 'research', 'Weight'], ['32', 1898, null], ['33', 2432, null], ['34', 2533, null], ['35', 2267, null],
                    ['36', 2649, null], ['37', 3018, null], ['38', 3264, null], ['39', 3460, null],
                    ['40', 3561, null], ['41', 3706, null], ['42', 3576 , null], ['43', 3465, null]];

        var array_1 = [['Day', 'research', 'Weight'], ['32', 1405, null], ['33', 1779, null], ['34', 2158, null], ['35', 2272, null],
                    ['36', 2493, null], ['37', 2783, null], ['38', 2984, null], ['39', 3185, null],
                    ['40', 3310, null], ['41', 3426, null], ['42', 3531, null], ['43', 3784, null]];
            .
            .
            .

        var array_10 = [['Day', 'research', 'Weight'], ['32', 2605 ,null], ['33', 3402, null], ['34', 3500, null], ['35', 3705, null],
                         ['36', 3810, null], ['37', 3856, null], ['38', 3955, null], ['39', 4120, null],
                         ['40', 4260, null], ['41', 4100, null], ['42', 4000 ,null], ['43', 3900, null]];

        var fixed = new Array(12);  // defining empty 2D array to the fixed array that will be show
        for (var i = 0; i < fixed.length; i++) 
          fixed[i] = []; 
        var number = Number($('number').getValue());       
        var day = document.getElementById("day");
        var weight = Number($('weight').getValue());
        switch (number) {
            case 0:
                for(i=1; i<=12; i++){
                    if(array_0[i][0] == day)
                        array_0[i][2] = weight;
                }
                fixed = array_0;
                break;

            case 1:
                for(i=1; i<=12; i++){
                    if(array_1[i][0] == day)
                        array_1[i][2] = weight;
                }
                fixed = array_1;
                break;
          .
          .
          .
            case 10:
                for(i=1; i<=12; i++){
                    if(array_10[i][0] == day)
                        array_10[i][2] = weight;
                }
                fixed = array_10;
                break;

            default:
                alert("Not Enough Data");
                break;
        }
        drawVisualization(fixed);
    }   
    function drawVisualization(fixed) {
        var data = google.visualization.arrayToDataTable(Array.from(fixed));
        var options = {
            title : 'Results',
            vAxis: {title: 'Weight'},
            hAxis: {title: 'Day'},
            seriesType: 'line',
            series: {1: {type: 'scatter'}}
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }    

</script>

$..getValue() взят из Прототип - Form.Element getValue () Метод

Моя html часть формы: 

<form onsubmit="fixArray()">
        <table>
            <tr>
                <td>Number:</td>
                <td><input id="number" name="number" type="number"></td>
            </tr>
            <tr>
                <td>Day:</td>
                <td><input id="day" name="day" type="text"></td>
            </tr>
            <tr>
                <td>Weight:</td>
                <td><input id="weight" name="weight" type="text"></td>
            </tr>
            <tr>
                <td>
                    <input name="Submit1" type="submit" value="Send" style="width: 80px; height: 35px"></td>
                <td>
                    <input name="Reset1" type="reset" value="Reset" style="width: 80px; height: 35px"></td>
            </tr>

        </table>
    </form>
    <div id="chart_div" style="width: 900px; height: 500px"></div>

Когда я пытаюсь запустить страницу и ввести значения, она не показывает ничего, кроме красной ошибки, где находится диаграмма div. Я вижу, что является ошибкой, когда я изменяю google.charts.setOnLoadCallback(); на google.charts.setOnLoadCallback(fixArray);, и ошибка «Все серии на заданной оси должны иметь один и тот же тип данных ×»

Я думаю, это не проблема исправления массив, потому что когда я пытаюсь drawVisualization(array_0) в коде вместо drawVisualization(fixed) для проверки, он показывает ту же ошибку.

В чем здесь проблема?

1 Ответ

0 голосов
/ 02 мая 2020

смысл setOnLoadCallback состоит в том, чтобы передать функцию,
, чтобы вы знали, когда Google Maps закончит загрузку.
setOnLoadCallback вызовет функцию, которую вы ей передадите.

например - по окончании загрузки будет вызван fixArray. 

google.charts.setOnLoadCallback(fixArray);

Вы также можете использовать обещание, которое оператор load возвращает ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(fixArray);

далее при использовании jquery для получения элемента по id,
вам нужно добавить знак фунта (#number) в начале идентификатора ... 

$('#number').val()

, и вы можете использовать метод val, чтобы получить значение.
также здесь , вы получаете элемент,
не значение элемента ... 

var day = document.getElementById("day");

просто используйте то же самое, что и остальные ... 

var day = Number($('#day').val());

next, I ' мы дали элементам ввода значение по умолчанию,
, поэтому диаграмма будет отображаться при первом запуске.

не совсем уверен, как вы хотите, чтобы страница "текла".

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

google.charts.load('current', {
  packages: ['corechart']
}).then(fixArray);

function fixArray() {
  var array_0 = [
    ['Day', 'research', 'Weight'],
    ['32', 1898, null],
    ['33', 2432, null],
    ['34', 2533, null],
    ['35', 2267, null],
    ['36', 2649, null],
    ['37', 3018, null],
    ['38', 3264, null],
    ['39', 3460, null],
    ['40', 3561, null],
    ['41', 3706, null],
    ['42', 3576, null],
    ['43', 3465, null]
  ];

  var array_1 = [
    ['Day', 'research', 'Weight'],
    ['32', 1405, null],
    ['33', 1779, null],
    ['34', 2158, null],
    ['35', 2272, null],
    ['36', 2493, null],
    ['37', 2783, null],
    ['38', 2984, null],
    ['39', 3185, null],
    ['40', 3310, null],
    ['41', 3426, null],
    ['42', 3531, null],
    ['43', 3784, null]
  ];

  var array_10 = [
    ['Day', 'research', 'Weight'],
    ['32', 2605, null],
    ['33', 3402, null],
    ['34', 3500, null],
    ['35', 3705, null],
    ['36', 3810, null],
    ['37', 3856, null],
    ['38', 3955, null],
    ['39', 4120, null],
    ['40', 4260, null],
    ['41', 4100, null],
    ['42', 4000, null],
    ['43', 3900, null]
  ];

  var fixed = new Array(12); // defining empty 2D array to the fixed array that will be show
  for (var i = 0; i < fixed.length; i++) {
    fixed[i] = [];
  }

  var number = Number($('#number').val());
  var day = Number($('#day').val());
  var weight = Number($('#weight').val());
  switch (number) {
    case 0:
      for (i = 1; i <= 12; i++) {
        if (array_0[i][0] == day)
          array_0[i][2] = weight;
      }
      fixed = array_0;
      break;

    case 1:
      for (i = 1; i <= 12; i++) {
        if (array_1[i][0] == day)
          array_1[i][2] = weight;
      }
      fixed = array_1;
      break;

    case 10:
      for (i = 1; i <= 12; i++) {
        if (array_10[i][0] == day)
          array_10[i][2] = weight;
      }
      fixed = array_10;
      break;

    default:
      alert("Not Enough Data");
      break;
  }
  drawVisualization(fixed);
}

function drawVisualization(fixed) {
  var data = google.visualization.arrayToDataTable(Array.from(fixed));
  var options = {
    title: 'Results',
    vAxis: {
      title: 'Weight'
    },
    hAxis: {
      title: 'Day'
    },
    seriesType: 'line',
    series: {
      1: {
        type: 'scatter'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<form onsubmit="fixArray()">
  <table>
    <tr>
      <td>Number:</td>
      <td><input id="number" name="number" type="number" value="0"></td>
    </tr>
    <tr>
      <td>Day:</td>
      <td><input id="day" name="day" type="text" value="32"></td>
    </tr>
    <tr>
      <td>Weight:</td>
      <td><input id="weight" name="weight" type="text" value="100"></td>
    </tr>
    <tr>
      <td>
        <input name="Submit1" type="submit" value="Send" style="width: 80px; height: 35px"></td>
      <td>
        <input name="Reset1" type="reset" value="Reset" style="width: 80px; height: 35px"></td>
    </tr>
  </table>
</form>
<div id="chart_div" style="width: 900px; height: 500px"></div>
...