Question

页面加载后我没有得到谷歌图表只是带有单词的红色矩形＆＃34;数据表未定义＆＃34;。经过一些调查，我认为原因是由于谷歌加载功能： google.charts.load或google.charts.setOnLoadCallback

加载页面后调用回调函数。不幸的是，那时数据集尚未就绪，因此来自谷歌图表库的错误。我无法在回调函数中定义数据集。 T. 代码：

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

    function drawChart(dataAir) {
      console.log("I'm in drawChart");
      var optionsAir = {
        title: 'air consumption - m3/h',
        legend: {position: 'right'},
        hAxis: {format: 'yy.MM.dd / HH:mm', gridlines: {count: 15}, textStyle: {fontSize: 10},},
        vAxis: {gridlines: {count: 15},title: 'Air consumption in m3/h',},
        height: 450,
        interpolateNulls: false,
      }
 var chartAir = new google.visualization.LineChart(document.getElementById('chart_Air'));
chartAir.draw(dataAir, optionsAir);
}

    $('input[name="daterange"]').daterangepicker({
        ranges: {
          'Last 1 day': [moment().subtract(1, 'days'), moment()],
          'Last 3 Days': [moment().subtract(3, 'days'), moment()],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        },
        alwaysShowCalendars: false,
        timePicker: true,
        timePickerIncrement: 30,
        showISOWeekNumbers: true,
        timePicker24Hour: true,
        minDate: "04/12/2016",
        maxDate: moment(),
        locale: {
          format: 'YYYY/MM/DD hh:mm'
        },
      },
      function(start, end, label) {
        var dateRange = {
          From: start.format('YYYY-MM-DD HH:mm:ss'),
          To: end.format('YYYY-MM-DD HH:mm:ss')
        };
        var jsonDataAir = google.visualization.arrayToDataTable([
          ['Year', 'Max score (100%)', 'MOL Group Total score', 'Best score', 'Industry average', 'Threshold'],
          ['2007',  100, 63, 77, 53, 68 ],
          ['2008',  100, 65, 80, 49, 68 ],
          ['2009',  100, 68, 82, 49, 69 ],
          ['2010',  100, 75, 77, 49, 70 ],
            ['2011', 100, 68, 86, 51, 68 ],
            ['2012', 100, 69, 85, 53, 72 ],
            ['2013', 100, 66, 83, 48, 69 ],
            ['2014', 100, 68, 87, 49, 68 ]
        ]);
        console.log("I'm in daterangepicker");
        drawChart(jsonDataAir);
      })

    $(document).ready(function() {
  block = 1;

      var dateRange = {
        From: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
        To: moment().format('YYYY-MM-DD HH:mm:ss')
      };
            var jsonDataAir = google.visualization.arrayToDataTable([
          ['Year', 'Max score (100%)', 'MOL Group Total score', 'Best score', 'Industry average', 'Threshold'],
          ['2007',  100, 63, 77, 53, 68 ],
          ['2008',  100, 65, 80, 49, 68 ],
          ['2009',  100, 68, 82, 49, 69 ],
          ['2010',  100, 75, 77, 49, 70 ],
            ['2011', 100, 68, 86, 51, 68 ],
            ['2012', 100, 69, 85, 53, 72 ],
            ['2013', 100, 66, 83, 48, 69 ],
            ['2014', 100, 68, 87, 49, 68 ]
        ]);
    console.log("I'm in document ready");    
    drawChart(jsonDataAir);
    });

在这里你可以找到jsfiddle：https://jsfiddle.net/Loshka/xgra2x93/33/

PS。我已经尝试了这个Google Chart loads on Page Refresh没有成功和其他一些想法，但我的JS知识相当有限，所以任何帮助都会受到赞赏。

在页面加载时执行Google Chart回调函数

0 个答案: