字符串filter和控制过滤数据多个谷歌图表
我被困在谷歌图表的范围filter堆栈列图表只是我想显示一些范围的数据..你能找到类别filter有什么问题吗？
如何按日期范围显示filter？ 是否有其他选项按产品名称进行过滤？ 非常感谢你…………….
google.charts.load('current', { packages: ['corechart','controls'] }).then(function () { // save charts for redraw var charts = {}; var options = { isStacked :'true', Column: { chartArea: { height: '100%', width: '100%', top: 60, left: 64, right: 32, bottom: 48, }, hAxis: { format: 'ddd' }, height: '100%', legend: { position: 'top' }, width: '100%' }, Pie: { height: '100%', width: '100%' } }; var formatDate = new google.visualization.DateFormat({ pattern: 'MMM yyyy' }); var controlCat = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'category_div', options: { filterColumnIndex: 0 } }); var controlStr = new google.visualization.ControlWrapper({ controlType: 'StringFilter', containerId: 'string_div', options: { matchType: 'any', filterColumnIndex: 0 } }); // get data var jsonData = [{"name":"p1","data":[["2017/01/01",1.539011],["2017/01/02",4.22612],["2017/01/03",9.685247],["2017/01/04",8.535989],["2017/01/14",18.260888],["2017/01/15",57.279945],["2017/01/16",61.24776],["2017/01/17",65.12251399999998],["2017/01/18",69.15200200000001],["2017/01/19",73.13965199999997],["2017/01/20",77.10624],["2017/01/21",81.127521],["2017/01/22",85.04579900000002],["2017/01/23",89.003693],["2017/01/24",92.817327],["2017/01/25",64.12351600000001],["2017/02/04",4.734462000000001],["2017/02/05",17.073667999999998],["2017/02/06",21.047981999999998],["2017/02/07",16.340846]]},{"name":"p2","data":[["2017/01/01",3.4],["2017/01/02",8.8],["2017/01/03",19.4],["2017/01/04",16.9],["2017/01/14",33.8],["2017/01/15",106.19999999999999],["2017/01/16",113.4],["2017/01/17",120.6],["2017/01/18",127.79999999999998],["2017/01/19",135.0],["2017/01/20",142.20000000000002],["2017/01/21",149.5],["2017/01/22",156.6],["2017/01/23",163.79999999999998],["2017/01/24",170.70000000000002],["2017/01/25",118.0],["2017/02/04",9.3],["2017/02/05",32.7],["2017/02/06",39.900000000000006],["2017/02/07",30.6],["2017/04/14",16.6]]},{"name":"p3","data":[["2017/01/01",0.090284],["2017/01/02",0.18148],["2017/01/03",0.36250400000000005],["2017/01/04",0.3223319999999999],["2017/01/14",0.629936],["2017/01/15",1.9858830000000007],["2017/01/16",2.117427],["2017/01/17",2.248054],["2017/01/18",2.3795070000000007],["2017/01/19",2.510548],["2017/01/20",2.6411759999999997],["2017/01/21",2.806806],["2017/01/22",2.9025950000000007],["2017/01/23",3.0344140000000004],["2017/01/24",3.156505],["2017/01/25",2.18585],["2017/02/04",0.200327],["2017/02/05",0.700937],["2017/02/06",0.8522410000000002],["2017/02/07",0.651459]]}]; loadData(jsonData, '0', 'Column'); var jsonData2 = [{"name":"p1","data":[["2017/01/01",1.539011],["2017/01/02",4.22612],["2017/01/03",9.685247],["2017/01/04",8.535989],["2017/01/14",18.260888],["2017/01/15",57.279945],["2017/01/16",61.24776],["2017/01/17",65.12251399999998],["2017/01/18",69.15200200000001],["2017/01/19",73.13965199999997],["2017/01/20",77.10624],["2017/01/21",81.127521],["2017/01/22",85.04579900000002],["2017/01/23",89.003693],["2017/01/24",92.817327],["2017/01/25",64.12351600000001],["2017/02/04",4.734462000000001],["2017/02/05",17.073667999999998],["2017/02/06",21.047981999999998],["2017/02/07",16.340846]]},{"name":"p2","data":[["2017/01/01",3.4],["2017/01/02",8.8],["2017/01/03",19.4],["2017/01/04",16.9],["2017/01/14",33.8],["2017/01/15",106.19999999999999],["2017/01/16",113.4],["2017/01/17",120.6],["2017/01/18",127.79999999999998],["2017/01/19",135.0],["2017/01/20",142.20000000000002],["2017/01/21",149.5],["2017/01/22",156.6],["2017/01/23",163.79999999999998],["2017/01/24",170.70000000000002],["2017/01/25",118.0],["2017/02/04",9.3],["2017/02/05",32.7],["2017/02/06",39.900000000000006],["2017/02/07",30.6],["2017/04/14",16.6]]},{"name":"p3","data":[["2017/01/01",0.090284],["2017/01/02",0.18148],["2017/01/03",0.36250400000000005],["2017/01/04",0.3223319999999999],["2017/01/14",0.629936],["2017/01/15",1.9858830000000007],["2017/01/16",2.117427],["2017/01/17",2.248054],["2017/01/18",2.3795070000000007],["2017/01/19",2.510548],["2017/01/20",2.6411759999999997],["2017/01/21",2.806806],["2017/01/22",2.9025950000000007],["2017/01/23",3.0344140000000004],["2017/01/24",3.156505],["2017/01/25",2.18585],["2017/02/04",0.200327],["2017/02/05",0.700937],["2017/02/06",0.8522410000000002],["2017/02/07",0.651459]]}]; loadData(jsonData2, '1', 'Column'); // load json data function loadData(jsonData, id, chartType) { // create data table var dataTable = new google.visualization.DataTable(); switch (chartType) { case 'Column': // add date column dataTable.addColumn('date', 'Date'); var aggColumns = []; var viewColumns = [0, { calc: function (dt, row) { return formatDate.formatValue(dt.getValue(row, 0)); }, label: dataTable.getColumnLabel(0), type: 'string' }]; $.each(jsonData, function(productIndex, product) { // add product column var colIndex = dataTable.addColumn('number', product.name); viewColumns.push(colIndex); aggColumns.push({ aggregation: google.visualization.data.sum, column: colIndex+1, label: dataTable.getColumnLabel(colIndex), type: dataTable.getColumnType(colIndex) }); // add product data $.each(product.data, function(dataIndex, data) { var rowIndex = dataTable.addRow(); var rowDate = new Date(data[0]); dataTable.setValue(rowIndex, 0, new Date(rowDate.getFullYear(), rowDate.getMonth(), 1)); dataTable.setValue(rowIndex, colIndex, data[1]); }); }); var dataView = new google.visualization.DataView(dataTable); dataView.setColumns(viewColumns); var groupData = google.visualization.data.group( dataView, [0, 1], aggColumns ); var dataView = new google.visualization.DataView(groupData); dataView.hideColumns([0]); dataTable = dataView; break; } // draw chart $(window).resize(function () { drawChart(id, chartType, dataTable); }); drawChart(id, chartType, dataTable); } // draw chart function drawChart(id, chartType, dataTable) { if (!charts.hasOwnProperty(id)) { charts[id] = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', containerId: 'chart-' + id, options: { isStacked: true } }); } var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); dash.bind([controlCat, controlStr], charts[id]); dash.draw(dataTable); } }); .control { display: inline-block; }
控件超出范围， drawChart无法达到
只需将它们移出loadData ，
请参阅以下工作代码段…
google.charts.load('current', { packages: ['corechart','controls'] }).then(function () { // save charts for redraw var charts = {}; var options = { isStacked :'true', Column: { chartArea: { height: '100%', width: '100%', top: 60, left: 64, right: 32, bottom: 48, }, hAxis: { format: 'ddd' }, height: '100%', legend: { position: 'top' }, width: '100%' }, Pie: { height: '100%', width: '100%' } }; var formatDate = new google.visualization.DateFormat({ pattern: 'MMM yyyy' }); var controlCat = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'category_div', options: { filterColumnIndex: 0 } }); var controlStr = new google.visualization.ControlWrapper({ controlType: 'StringFilter', containerId: 'string_div', options: { matchType: 'any', filterColumnIndex: 0 } }); // get data var jsonData = [{"name":"p1","data":[["2017/01/01",1.539011],["2017/01/02",4.22612],["2017/01/03",9.685247],["2017/01/04",8.535989],["2017/01/14",18.260888],["2017/01/15",57.279945],["2017/01/16",61.24776],["2017/01/17",65.12251399999998],["2017/01/18",69.15200200000001],["2017/01/19",73.13965199999997],["2017/01/20",77.10624],["2017/01/21",81.127521],["2017/01/22",85.04579900000002],["2017/01/23",89.003693],["2017/01/24",92.817327],["2017/01/25",64.12351600000001],["2017/02/04",4.734462000000001],["2017/02/05",17.073667999999998],["2017/02/06",21.047981999999998],["2017/02/07",16.340846]]},{"name":"p2","data":[["2017/01/01",3.4],["2017/01/02",8.8],["2017/01/03",19.4],["2017/01/04",16.9],["2017/01/14",33.8],["2017/01/15",106.19999999999999],["2017/01/16",113.4],["2017/01/17",120.6],["2017/01/18",127.79999999999998],["2017/01/19",135.0],["2017/01/20",142.20000000000002],["2017/01/21",149.5],["2017/01/22",156.6],["2017/01/23",163.79999999999998],["2017/01/24",170.70000000000002],["2017/01/25",118.0],["2017/02/04",9.3],["2017/02/05",32.7],["2017/02/06",39.900000000000006],["2017/02/07",30.6],["2017/04/14",16.6]]},{"name":"p3","data":[["2017/01/01",0.090284],["2017/01/02",0.18148],["2017/01/03",0.36250400000000005],["2017/01/04",0.3223319999999999],["2017/01/14",0.629936],["2017/01/15",1.9858830000000007],["2017/01/16",2.117427],["2017/01/17",2.248054],["2017/01/18",2.3795070000000007],["2017/01/19",2.510548],["2017/01/20",2.6411759999999997],["2017/01/21",2.806806],["2017/01/22",2.9025950000000007],["2017/01/23",3.0344140000000004],["2017/01/24",3.156505],["2017/01/25",2.18585],["2017/02/04",0.200327],["2017/02/05",0.700937],["2017/02/06",0.8522410000000002],["2017/02/07",0.651459]]}]; loadData(jsonData, '0', 'Column'); // load json data function loadData(jsonData, id, chartType) { // create data table var dataTable = new google.visualization.DataTable(); switch (chartType) { case 'Column': // add date column dataTable.addColumn('date', 'Date'); var aggColumns = []; var viewColumns = [0, { calc: function (dt, row) { return formatDate.formatValue(dt.getValue(row, 0)); }, label: dataTable.getColumnLabel(0), type: 'string' }]; $.each(jsonData, function(productIndex, product) { // add product column var colIndex = dataTable.addColumn('number', product.name); viewColumns.push(colIndex); aggColumns.push({ aggregation: google.visualization.data.sum, column: colIndex+1, label: dataTable.getColumnLabel(colIndex), type: dataTable.getColumnType(colIndex) }); // add product data $.each(product.data, function(dataIndex, data) { var rowIndex = dataTable.addRow(); var rowDate = new Date(data[0]); dataTable.setValue(rowIndex, 0, new Date(rowDate.getFullYear(), rowDate.getMonth(), 1)); dataTable.setValue(rowIndex, colIndex, data[1]); }); }); var dataView = new google.visualization.DataView(dataTable); dataView.setColumns(viewColumns); var groupData = google.visualization.data.group( dataView, [0, 1], aggColumns ); var dataView = new google.visualization.DataView(groupData); dataView.hideColumns([0]); dataTable = dataView; break; } // draw chart $(window).resize(function () { drawChart(id, chartType, dataTable); }); drawChart(id, chartType, dataTable); } // draw chart function drawChart(id, chartType, dataTable) { if (!charts.hasOwnProperty(id)) { charts[id] = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', containerId: 'chart-' + id, options: { isStacked: true } }); } var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); dash.bind([controlCat, controlStr], charts[id]); dash.draw(dataTable); } });
.control { display: inline-block; }