Использовать результат функции get в пределах javascript - PullRequest
Новая
       53

Использовать результат функции get в пределах javascript

1 голос
/ 14 февраля 2020

Я пытаюсь использовать диаграмму Google, как показано без зависимости здесь Чтобы заставить это работать с моими данными, я импортирую данные для строк следующим образом ...

$. Get ('http://104.12.156.29: 8011 / java / servlet / UTRICKC5.I00120s ', function (data2) {console.log (data2);});

This извлекает то, что мне нужно ... но как я могу заменить блок data.addrows тем, что я извлекаю?

Для справки, то, что я получаю в консоли, таково: 

['Task 1', 'Task 1','Team 1',new Date(2014 , 02, 01), new Date(2014 , 02, 10), null, 50, null], 
['Task 2', 'Task 2','Team 2',new Date(2014 , 03, 01), new Date(2014 , 04, 01), null, 1, null]

Так что мне просто нужно найти способ заставить его «рендерить» как часть моего javascript. 

<script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');
            $.get('http://http://104.12.156.29:8011/java/servlet/UTRICKC5.I00120s', function (data2) {
      console.log(data2);});
      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);
      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };
      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>

1 Ответ

0 голосов
/ 18 февраля 2020

сначала, рекомендуем отформатировать данные как json, как найдено здесь ... 

{
  "cols": [
    {"label": "Task ID", "type": "string"},
    {"label": "Task Name", "type": "string"},
    {"label": "Resource", "type": "string"},
    {"label": "Start Date", "type": "date"},
    {"label": "End Date", "type": "date"},
    {"label": "Duration", "type": "number"},
    {"label": "Percent Complete", "type": "number"},
    {"label": "Dependencies", "type": "string"}
  ],
  "rows": [
    {"c":[{"v": "Task 1"}, {"v": "Task 1"}, {"v": "Team 1"}, {"v": "Date(2014, 2, 1)"}, {"v": "Date(2014, 2, 10)"}, {"v": null}, {"v": 50}, {"v": null}]},
    {"c":[{"v": "Task 2"}, {"v": "Task 2"}, {"v": "Team 2"}, {"v": "Date(2014, 3, 1)"}, {"v": "Date(2014, 4, 1)"}, {"v": null}, {"v": 1}, {"v": null}]}
  ]
}

это позволит вам создать таблицу данных напрямую, без клиентской стороны манипуляции.
и это самый быстрый способ загрузки таблицы данных.

next, $.get и $.ajax асинхронны,
, что означает, что вам нужно будет дождаться получения данных,
, прежде чем пытаться создать таблицу данных и нарисовать диаграмму.

рекомендуем использовать $.ajax, чтобы вы могли указать dataType как json.

см. Следующий рабочий фрагмент,
здесь, я использую метод обещания fail, чтобы фрагмент работал,
вы можете удалить на своем сервере и просто оставить метод done. 

google.charts.load('current', {
  packages: ['gantt']
}).then(function () {
  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
  var options = {
    height: 400,
    gantt: {
      trackHeight: 30
    }
  };

  $.ajax({
    url: 'http://104.12.156.29:8011/java/servlet/UTRICKC5.I00120s',
    dataType: 'json'
  }).done(drawChart).fail(function () {
    var chartData = {
      "cols": [
        {"label": "Task ID", "type": "string"},
        {"label": "Task Name", "type": "string"},
        {"label": "Resource", "type": "string"},
        {"label": "Start Date", "type": "date"},
        {"label": "End Date", "type": "date"},
        {"label": "Duration", "type": "number"},
        {"label": "Percent Complete", "type": "number"},
        {"label": "Dependencies", "type": "string"}
      ],
      "rows": [
        {"c":[{"v": "Task 1"}, {"v": "Task 1"}, {"v": "Team 1"}, {"v": "Date(2014, 2, 1)"}, {"v": "Date(2014, 2, 10)"}, {"v": null}, {"v": 50}, {"v": null}]},
        {"c":[{"v": "Task 2"}, {"v": "Task 2"}, {"v": "Team 2"}, {"v": "Date(2014, 3, 1)"}, {"v": "Date(2014, 4, 1)"}, {"v": null}, {"v": 1}, {"v": null}]}
      ]
    };
    drawChart(chartData);
  });

  function drawChart(chartData) {
    var data = new google.visualization.DataTable(chartData);
    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>
<div id="chart_div"></div>
...