使用Google Visualization，爲什麼DataView內容在ChartRangeFilter中顯示，但不在其關聯的LineChart中顯示？

Question

下面的代碼應該從CSV文件填充DataView。然後將DataView提供給包含在一起的LineChart和ChartRangeFilter的DashBoard。我的問題是，雖然ChartRangeFilter顯示一個適當的圖表預覽，並允許我選擇範圍LineChart只顯示一個空的數據集，但具有正確的數據類型和軸標籤。我的假設是DataView內容是OK的，因爲ChartRangeFilter能夠顯示它。爲什麼LineChart不能這樣做？

google.load('visualization', '1', {packages: ['controls', 'charteditor']}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    // Create CSV string 
    csvString = 'TIME,TEMP0,HUM0\n13:00:04,24.7,50\n13:01:05,26.7,60\n13:02:04,22.7,52\n13:03:05,14.7,40\n13:04:04,34.7,80\n13:05:05,24.7,50'; 

    // Parse string into an Array 
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); 

    // Convert Array into a DataTable 
    var data = new google.visualization.arrayToDataTable(arrayData); 

    // Create DataView from DataTable 
    var view = new google.visualization.DataView(data); 

    // Convert string times in first column to timeofday (thanks to WhiteHat!) 
    var columns = []; 
    for (var i = 0; i < data.getNumberOfColumns(); i++) { 
     columns.push(i); 
    } 

    columns[0] = { 
     calc: function(dt, row) { 
      var thisDate = new Date('1/1/2016 ' + dt.getValue(row, 0)); 
      return [thisDate.getHours(), thisDate.getMinutes(), thisDate.getSeconds(), thisDate.getMilliseconds()]; 
     }, 
     label: arrayData[0][0], 
     type: 'timeofday' 
    }; 

    // Determine which columns should be visible 
    view.setColumns(columns);  

    // Create Dashboard 
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 

    // Range filter control wrapper 
    var control = new google.visualization.ControlWrapper({ 
     controlType: 'ChartRangeFilter', 
     containerId: 'control_div', 
     options: { 
      filterColumnIndex: 0, 
      ui: { 
       chartOptions: { 
        height: 50, 
        width: 1000, 
       }, 
       chartView: { 
        columns: [0, 1,2] 
       } 
      } 
     } 
    }); 

    // Line chart wrapper 
    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'LineChart', 
     containerId: 'chart_div', 
     dataTable: view, 
     options:{ 
      title: 'Home Automation - Environment Sensor Log', 
      width: 1000, 
      height: 400 
     } 
    }); 

    // Bind control and chart in Dashboard 
    dash.bind([control], [chart]); 

    // Draw dashboard using Dataview as source 
    dash.draw(view); 
} 

這是當前的最終結果是：

謝謝！

Answer 1

嘗試了一些事情讓圖表與'timeofday'工作，但沒有運氣

然而，使用'date'列，格式爲'HH:mm:ss'似乎做工精細

看到下面的工作片段。

變化包括：

1）使用

loader.js與 jsapi
2）改變 calc函數返回日期格式爲時間
3）加入 hAxis.ticks兩者 chart和 control
4）用於 getColumnRange設置 vAxis.viewWindow上的 chart

google.charts.load('current', { 
 
    callback: function() { 
 
    // Create CSV string 
 
    csvString = 'TIME,TEMP0,HUM0\n13:00:04,24.7,50\n13:01:05,26.7,60\n13:02:04,22.7,52\n13:03:05,14.7,40\n13:04:04,34.7,80\n13:05:05,24.7,50'; 
 

 
    // Parse string into an Array 
 
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); 
 

 
    // Convert Array into a DataTable 
 
    var data = new google.visualization.arrayToDataTable(arrayData); 
 

 
    // Create DataView from DataTable 
 
    var view = new google.visualization.DataView(data); 
 

 
    // Convert string times in first column to timeofday (thanks to WhiteHat!) 
 
    var columns = []; 
 
    for (var i = 0; i < data.getNumberOfColumns(); i++) { 
 
     columns.push(i); 
 
    } 
 

 
    var formatter = new google.visualization.DateFormat({pattern: 'HH:mm:ss'}); 
 
    columns[0] = { 
 
     calc: function(dt, row) { 
 
      var dateValue = new Date('1/1/2016 ' + dt.getValue(row, 0)); 
 
      return { 
 
       v: dateValue, 
 
       f: formatter.formatValue(dateValue) 
 
      }; 
 
     }, 
 
     label: arrayData[0][0], 
 
     type: 'date' 
 
    }; 
 

 
    // Determine which columns should be visible 
 
    view.setColumns(columns); 
 

 
    var tickMarks = []; 
 
    for (var i = 0; i < view.getNumberOfRows(); i++) { 
 
     tickMarks.push(view.getValue(i, 0)); 
 
    } 
 

 
    // Create Dashboard 
 
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 
 

 
    // Get column range min & max 
 
    var yRange1 = view.getColumnRange(1); 
 
    var yRange2 = view.getColumnRange(2); 
 

 
    var control = new google.visualization.ControlWrapper({ 
 
     controlType: 'ChartRangeFilter', 
 
     containerId: 'control_div', 
 
     options: { 
 
      filterColumnIndex: 0, 
 
      ui: { 
 
       chartOptions: { 
 
        height: 50, 
 
        width: 1000, 
 
        hAxis: { 
 
         ticks: tickMarks, 
 
         format: 'HH:mm:ss' 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }); 
 

 
    // Line chart wrapper 
 
    var chart = new google.visualization.ChartWrapper({ 
 
     chartType: 'LineChart', 
 
     containerId: 'chart_div', 
 
     options:{ 
 
      pointSize: 8, 
 
      title: 'Home Automation - Environment Sensor Log', 
 
      width: 1000, 
 
      height: 400, 
 
      hAxis: { 
 
       ticks: tickMarks, 
 
       format: 'HH:mm:ss' 
 
      }, 
 
      vAxis: { 
 
       viewWindow: { 
 
       min: Math.min(yRange1.min, yRange2.min), 
 
       max: Math.max(yRange1.max, yRange2.max) 
 
       } 
 
      } 
 
     } 
 
    }); 
 

 
    // Bind control and chart in Dashboard 
 
    dash.bind(control, chart); 
 

 
    // Draw dashboard using Dataview as source 
 
    dash.draw(view); 
 
    }, 
 
    packages: ['controls', 'corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script> 
 
<div id="dashboard"> 
 
    <div id="chart_div"></div> 
 
    <div id="control_div"></div> 
 
</div>