Google可視化 - 對ChartRangeFilter的解釋

Question

我已經實現了一個線圖，它繪製了來自地理編碼地址的JSON數據。該圖有很多類別，我也實施了一個可以正常工作的類別過濾器。圖表的時間軸是從1月到12月，我想讓用戶可以看到特定的月份。谷歌可視化ChartRangeFilter符合這個目的，但有兩點我需要有人爲我澄清，如果可能的話。

一）由於我們的日期轉換爲字符串：

var chart = new google.visualization.ChartWrapper 

爲什麼我們在data.addRow指定日期對象？ 1,2,3,4也代表'type': 'string'下代表什麼？

b）我想知道如何將ChartRangeFilter的功能添加到我當前的代碼中？我已經有一個類別過濾器的控制器，但我也想用ChartRangeControl來改善它。

這裏是我到目前爲止的代碼的類別過濾器：

var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Month'); 
     data.addColumn('number', 'Anti-Social Behaviour'); 
     data.addColumn('number', 'Burglary'); 
    data.addColumn('number', 'Drugs'); 
     data.addColumn('number', 'Criminal-damage-arson'); 
     data.addColumn('number', 'Other Theft'); 
    data.addColumn('number', 'Public Disorder Weapons'); 
     data.addColumn('number', 'Robbery'); 
     data.addColumn('number', 'Shoplifting'); 
    data.addColumn('number', 'Vehicle Crime'); 
     data.addColumn('number', 'Violent Crime'); 
     data.addColumn('number', 'Other Crime'); 
     data.addRows([ 
     ['January', Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3) ], 
     ['February', Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3), Math.floor(((Math.random()*1000)+1)/3), Math.floor((Math.random()*100)+1), Math.floor(((Math.random()*1000)+1)/3)] 
]); 

    var columnsTable = new google.visualization.DataTable(); 
    columnsTable.addColumn('number', 'colIndex'); 
    columnsTable.addColumn('string', 'colLabel'); 
    var initState= {selectedValues: []}; 
    // put the columns into this data table (skip column 0) 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
    columnsTable.addRow([i, data.getColumnLabel(i)]); 
    initState.selectedValues.push(data.getColumnLabel(i)); 
    } 

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'LineChart', 
     containerId: 'line_div', 
     dataTable: data, 
     options: { 
     title: 'The crime in your area by category', 
     width: 700, 
     height: 300 
    } 
}); 

chart.draw(); 

var columnFilter = new google.visualization.ControlWrapper({ 
    controlType: 'CategoryFilter', 
    containerId: 'colFilter_div', 
    dataTable: columnsTable, 
    options: { 
     filterColumnLabel: 'colLabel', 
     ui: { 
      label: 'Columns', 
      allowTyping: false, 
      allowMultiple: true, 
      selectedValuesLayout: 'belowStacked' 
     } 
    }, 
    state: initState 
}); 

google.visualization.events.addListener(columnFilter, 'statechange', function() { 
    var state = columnFilter.getState(); 
    var row; 
    var columnIndices = [0]; 
    for (var i = 0; i < state.selectedValues.length; i++) { 
     row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0]; 
     columnIndices.push(columnsTable.getValue(row, 0)); 
    } 
    // sort the indices into their original order 
    columnIndices.sort(function (a, b) { 
     return (a - b); 
    }); 
    chart.setView({columns: columnIndices}); 
    chart.draw(); 
}); 

columnFilter.draw(); 

我添加隨機值的問題，因爲JSON數據會使代碼的長度。

Answer 1

ChartRangeFilter的遊樂場示例是一個可怕的例子，因爲它不必要地使日期複雜化到完全不必要的字符串轉換。如果刪除ChartWrapper的view參數，示例工作得很好：

var chart = new google.visualization.ChartWrapper({ 
    chartType: 'CandlestickChart', 
    containerId: 'chart', 
    options: { 
     // Use the same chart area width as the control for axis alignment. 
     chartArea: { 
      height: '80%', 
      width: '90%' 
     }, 
     vAxis: { 
      viewWindow: { 
       min: 0, 
       max: 2000 
      } 
     }, 
     legend: { 
      position: 'none' 
     } 
    } 
}); 

直接回答你的問題：

的ChartRangeFilter必須篩選上連續的數據類型列（number，date，datetime， timeofday），所以這就是爲什麼DataTable的第一列是date類型。如果我正確回憶了API的歷史，CandlestickCharts的原始實現不能與連續的域軸類型一起使用，所以日期到字符串的轉換對於使圖表工作是必要的（儘管我更喜歡這個例子只需使用可以連續軸使用的圖表）。

該示例中'type': 'string'以下的數字是view.columns數組參數中的其餘元素。該數組可以採用任何數字作爲基本DataTable中列的索引來引用，也可以採用告訴視圖如何計算要在該列中使用的值的對象。在該示例中，數組的第一個元素是將日期轉換爲字符串的對象，其餘元素是數據列的列索引。