如何在Google可視化儀表板中使用日期篩選餅圖

我有一個從當年銷售表中取得的數據組。該組有兩列：銷售類型（例如現金，租賃等）和計數，這只是日期字段上的彙總。如何在Google可視化儀表板中使用日期篩選餅圖

我可以很容易地得到一個餅圖。現在我想添加一個類別選擇器，允許用戶通過選擇一年來更改餅圖。我怎樣才能做到這一點？

這是到目前爲止我的代碼：

var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')); 

var categoryPicker = new google.visualization.ControlWrapper({ 
    'controlType': 'CategoryFilter', 
    'containerId': 'categoryPicker_div', 
    'options': { 
     'filterColumnIndex': 1, 
     'ui': { 
      'labelStacking': 'vertical', 
      'label': 'Year:', 
      'allowTyping': false, 
      'allowMultiple': false 
     } 
    } 
}); 

var groupedData = google.visualization.data.group(
    gDataTableSales, 
    [ { column: 3, type: 'string', label: 'Type' } ], 
    [ { column: 2, aggregation: google.visualization.data.count, type: 'number', label: 'Count' } ]); 

var chart = new google.visualization.ChartWrapper({ 
    chartType: 'PieChart', 
    containerId: 'chart_div' }); 

dashboard.bind([ categoryPicker ], [ chart ]); 
dashboard.draw(groupedData);

圖表和類別選擇器中得到呈現，我可以選擇計數和圖表的更新提示如預期的機制正在工作。

來源

2017-05-09 MoreScratch

的data format一個餅圖是從其他核心圖表
的數據需要在列，而不是列不同
只能有一個系列

一個選擇是使用兩個聚合。 ..

年，分類，計數
分類，計數

，如果你想允許「所有年份」的選擇，二是隻需要，或
使用 - >allowNone: true - 這是默認

，而不是在儀表板結合的類別過濾器和圖表，吸引他們獨立

使用的過濾器的statechange事件，以確定繪製數據表

看到下面的工作片段...

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

 
function drawChart() { 
 
    var dataTableSales = google.visualization.arrayToDataTable([ 
 
    ['Sale Date', 'Sale Type'], 
 
    [new Date(2016, 0, 16), 'cash sale'], 
 
    [new Date(2016, 0, 16), 'cash sale'], 
 
    [new Date(2016, 0, 16), 'leased'], 
 
    [new Date(2016, 0, 16), 'leased'], 
 
    [new Date(2016, 0, 16), 'financed'], 
 
    [new Date(2017, 0, 16), 'cash sale'], 
 
    [new Date(2017, 0, 16), 'cash sale'], 
 
    [new Date(2017, 0, 16), 'cash sale'], 
 
    [new Date(2017, 0, 16), 'financed'], 
 
    [new Date(2016, 0, 17), 'cash sale'], 
 
    [new Date(2016, 0, 17), 'financed'], 
 
    [new Date(2016, 0, 17), 'cash sale'], 
 
    [new Date(2016, 0, 17), 'leased'], 
 
    [new Date(2016, 0, 17), 'financed'], 
 
    [new Date(2017, 0, 17), 'financed'], 
 
    [new Date(2017, 0, 17), 'financed'], 
 
    [new Date(2017, 0, 17), 'cash sale'], 
 
    [new Date(2017, 0, 17), 'financed'], 
 
    [new Date(2016, 0, 18), 'leased'], 
 
    [new Date(2016, 0, 18), 'cash sale'], 
 
    [new Date(2017, 0, 18), 'cash sale'], 
 
    [new Date(2017, 0, 18), 'cash sale'] 
 
    ]); 
 
    dataTableSales.sort({column: 0}); 
 

 
    var dataByYear = google.visualization.data.group(
 
    dataTableSales, 
 
    [{ 
 
     column: 0, 
 
     type: 'string', 
 
     modifier: function (value) { 
 
     return value.getFullYear().toString(); 
 
     } 
 
    }, 1], 
 
    [{ 
 
     column: 1, 
 
     type: 'number', 
 
     aggregation: google.visualization.data.count 
 
    }] 
 
); 
 

 
    var dataAll = google.visualization.data.group(
 
    dataTableSales, 
 
    [1], 
 
    [{ 
 
     column: 1, 
 
     type: 'number', 
 
     aggregation: google.visualization.data.count 
 
    }] 
 
); 
 

 
    var yearPicker = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'categoryFilter_div', 
 
    dataTable: dataByYear, 
 
    options: { 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
     allowTyping: false, 
 
     allowMultiple: false, 
 
     caption: 'All Years', 
 
     label: '', 
 
     labelStacking: 'vertical' 
 
     }, 
 
     useFormattedValue: true 
 
    } 
 
    }); 
 
    google.visualization.events.addListener(yearPicker, 'statechange', function() { 
 
    if (yearPicker.getState().selectedValues.length > 0) { 
 
     pieChart.setView({ 
 
     columns: [1, 2], 
 
     rows: dataByYear.getFilteredRows([{ 
 
      column: 0, 
 
      value: yearPicker.getState().selectedValues[0] 
 
     }]) 
 
     }); 
 
     pieChart.setDataTable(dataByYear); 
 
    } else { 
 
     pieChart.setView(null); 
 
     pieChart.setDataTable(dataAll); 
 
    } 
 
    pieChart.draw(); 
 
    }); 
 
    yearPicker.draw(); 
 

 
    var pieChart = new google.visualization.ChartWrapper({ 
 
    chartType: 'PieChart', 
 
    containerId: 'chart_div', 
 
    dataTable: dataAll, 
 
    options: { 
 
     height: 300 
 
    } 
 
    }); 
 
    pieChart.draw(); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="categoryFilter_div"></div> 
 
<div id="chart_div"></div>

來源

2017-05-12 17:03:29 WhiteHat

如何在Google可視化儀表板中使用日期篩選餅圖

回答

相關問題