javascript - 谷歌图表仅在页面刷新时加载

Question

我是使用 google charts/js 的初学者。我下面的谷歌图表加载正常，但有时图表区域加载空白 html，当我刷新页面时它会正确显示。

我不确定这是为什么。它似乎在所有浏览器上都这样做。 This似乎表明它可能与 Mozilla 有关，但问题仍然存在......

 <script type="text/javascript">

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

        <?php
        $imei = $bboxx_imei;
        $result = shell_exec('Daily_Data_Retriever_ishackweb.py ' . $imei.' '. $end.' '.$start); #imei=sys.arg[1] end=sys.arg[2] start=sys.arg[3]
        ?>

          var jsonData =  <?php echo $result; ?>   //{"Charge Current, (A)":{"2017-11-16T00:00:00.000Z":0.001373312,"2017-11-16T00:01:00.000Z":0.001373312,"2017-11-16T00:02:00.000Z":0.001373312,"2017-11-16T00:03:00.000Z":0.001373312,"2017-11-16T00:04:00.000Z":0.001373312},"Battery Voltage, (V)":{"2017-11-16T00:00:00.000Z":12.9267109178,"2017-11-16T00:01:00.000Z":12.9267109178,"2017-11-16T00:02:00.000Z":12.9267109178,"2017-11-16T00:03:00.000Z":12.9267109178,"2017-11-16T00:04:00.000Z":12.9267109178}};

            var chartCols = ['Datetime'];
            Object.keys(jsonData).forEach(function (column) {
              chartCols.push(column);
            });
            // build list of date
            var dateValues = [];
            Object.keys(jsonData).forEach(function (column) {
              Object.keys(jsonData[column]).forEach(function (dateValue) {
                if (dateValues.indexOf(dateValue) === -1) {
                  dateValues.push(dateValue);
                }
              });
            });
              // build chart data
              var chartData = [chartCols];
              dateValues.forEach(function (dateValue) {
                var row = [new Date(dateValue)];
                Object.keys(jsonData).forEach(function (column) {
                  row.push(jsonData[column][dateValue] || null);
                });
                chartData.push(row);
            });
        var data = google.visualization.arrayToDataTable(chartData);
        var options = {
        chartArea: {width:'90%', height:'85%'},
        //title: 'Battery Voltage and Panel Charge',
        curveType: 'function',
        legend: { position: 'bottom' },
        vAxes: {0: {viewWindowMode:'explicit',
                      viewWindow:{
                                  max:16,
                                  min:11
                                  },
                                  gridlines: {color: 'transparent'},
                      },

                1: {viewWindowMode:'explicit',
                      viewWindow:{
                                  max:5,
                                  min:0
                                  },
                },
                },
        series: {0: {targetAxisIndex:1},
                1:  {targetAxisIndex:0},
                },
        };
        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
        chart.draw(data, options);
        $(window).resize(function(){
        drawChart()
         });
    });
  </script>

Answer 1

在内联/匿名使用函数时，尽管您可以提供名称，
您将无法通过它的名称再次调用相同的函数

google.charts.load('current', {
  packages: ['corechart']
}).then(function drawChart() {  // <-- cannot call this again, no name needed
...

相反，单独声明函数，然后在需要的地方传递引用，
使用函数名

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

$(window).resize(drawChart);

function drawChart() {
  ...
}

---

请参阅以下工作片段...

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

$(window).resize(drawChart);

function drawChart() {
  var jsonData =  {"Charge Current, (A)":{"2017-11-16T00:00:00.000Z":0.001373312,"2017-11-16T00:01:00.000Z":0.001373312,"2017-11-16T00:02:00.000Z":0.001373312,"2017-11-16T00:03:00.000Z":0.001373312,"2017-11-16T00:04:00.000Z":0.001373312},"Battery Voltage, (V)":{"2017-11-16T00:00:00.000Z":12.9267109178,"2017-11-16T00:01:00.000Z":12.9267109178,"2017-11-16T00:02:00.000Z":12.9267109178,"2017-11-16T00:03:00.000Z":12.9267109178,"2017-11-16T00:04:00.000Z":12.9267109178}};

  var chartCols = ['Datetime'];
  Object.keys(jsonData).forEach(function (column) {
    chartCols.push(column);
  });
  // build list of date
  var dateValues = [];
  Object.keys(jsonData).forEach(function (column) {
    Object.keys(jsonData[column]).forEach(function (dateValue) {
      if (dateValues.indexOf(dateValue) === -1) {
        dateValues.push(dateValue);
      }
    });
  });
  // build chart data
  var chartData = [chartCols];
  dateValues.forEach(function (dateValue) {
    var row = [new Date(dateValue)];
    Object.keys(jsonData).forEach(function (column) {
      row.push(jsonData[column][dateValue] || null);
    });
    chartData.push(row);
  });

  var data = google.visualization.arrayToDataTable(chartData);
  var options = {
    chartArea: {width:'90%', height:'85%'},
    //title: 'Battery Voltage and Panel Charge',
    curveType: 'function',
    legend: { position: 'bottom' },
    vAxes: {
      0: {
        viewWindowMode:'explicit',
        viewWindow:{
          max:16,
          min:11
        },
        gridlines: {color: 'transparent'},
      },
      1: {
        viewWindowMode:'explicit',
        viewWindow:{
          max:5,
          min:0
        },
      },
    },
    series: {
      0: {targetAxisIndex:1},
      1:  {targetAxisIndex:0},
    },
  };

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_chart"></div>