Question

我正在构建一个使用MYSQL数据填充的Google条形图，它似乎正确填充，但是当我将鼠标悬停在条形图上时，它显示NaN：NaN valueim不确定为什么

我已经搜索了一下，但是似乎找不到其他人遇到这个问题，所以我相信这可能只是我编写它的方式

我创建了一个sqlfiddle只是为了显示代码以保存在此处输入的内容底部的图片将显示其观看方式

<script>
google.charts.load('current', {
  packages: ['bar', 'corechart']
}).then(function () {
 var dataRaw = google.visualization.arrayToDataTable([  
                      ['Location', 'Date', 'Customer Count'],  
                      <?php
    $connect = mysqli_connect("localhost", "user", "password", "test");
if(isset($_POST['but_search'])){
      $fromDate = $_POST['fromDate'];
      $endDate = $_POST['endDate'];

      if(!empty($fromDate) && !empty($endDate)){
         $emp_query .= " and date_of_join 
                      between '".$fromDate."' and '".$endDate."' ";
      }
    }  
    $query = "select date,location,count(location) as customer_count from filter where date between '".$fromDate."' and '".$endDate."' group by date,location";  
    $result = mysqli_query($connect, $query);  
                      while($row = mysqli_fetch_array($result))  
                      {  
                           echo "['".$row["location"]."', '".$row["date"]."', '".$row["customer_count"]."'],"; 
                      }  
                      ?> 
                 ]);


// build new data table
var data = new google.visualization.DataTable();
data.addColumn('string', 'date');

// add columns and rows
var colors = [];
var date = null;
var colIndex;
var rowIndex;
var timeofday;
for (var i = 0; i < dataRaw.getNumberOfRows(); i++) {
// add row date
if (dataRaw.getValue(i, 1) !== date) {
  date = dataRaw.getValue(i, 1);
  rowIndex = data.addRow();
  data.setValue(rowIndex, 0, date);
  colIndex = 1;
}
// add location column
if (data.getNumberOfColumns() === colIndex) {
  data.addColumn('timeofday', dataRaw.getValue(i, 0));
  colors.push(dataRaw.getValue(i, 0));
}
// build timeofday from time string
timeofday = dataRaw.getValue(i, 2).split(':').map(function (time) {
  return parseInt(time);
});
timeofday.push(0);
// add location value
data.setValue(rowIndex, colIndex, timeofday);
colIndex++;
}


// classic chart
var chart = new google.visualization.ColumnChart(document.getElementById('barchart'));
chart.draw(data, {
colors: colors,
theme: 'material',
title: 'data',
backgroundColor: '#E4E4E4',
});
});
</script>

http://sqlfiddle.com/#!9/bcdf69/5 Table

将鼠标悬停在条形图上时，Google条形图显示NaN：NaN

0 个答案: