google-visualization - 单击时控件（类别过滤器）未正确更新表格图表

Question

我有一张包含产品的表格。当我单击一行时，它会为该选定产品生成一个图表。但是，当我应用按日期过滤的类别过滤器时，表格数据会正确更改，但是当我单击一行时，它仍然会选择下面的行，就像表格没有被过滤一样。我坚持了一段时间并尝试了多种解决方案但没有成功。我在控件的“statechange”上创建 DataView 的最新代码：

function drawDashboard(tableData) {
        
            var data = new google.visualization.arrayToDataTable(tableData);
            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

            var table = new google.visualization.ChartWrapper({
                chartType: 'Table',
                containerId: 'table_div1',
                dataTable: data,
                options: {
                showRowNumber: true,
                width: '90%',
                page: 'enable',
                pageSize: 15
                }
            });
            
                
                var categoryFilter = new google.visualization.ControlWrapper({
                controlType: 'CategoryFilter',
                containerId: 'categoryFilter_div',
                dataTable: data,
                options: {
                    filterColumnIndex: 6,
                },
            }); 

           google.visualization.events.addListener(table , 'select', tableSelectHandler);
           google.visualization.events.addListener(categoryFilter , 'statechange', function(){
                console.log("State changed");
                var view = new google.visualization.DataView(data);
                view.setRows(data.getFilteredRows([{
                    column: 6,
                    maxValue: categoryFilter.getState().selectedValues[6],
                    minValue: data.getColumnRange(6).max
                }]));
                console.log(categoryFilter.getState());
                table.setView(view);
                table.draw();
                
            });

            dashboard.bind(categoryFilter, table);
            dashboard.draw(data);

         function tableSelectHandler(e){
                
                
                var selectedItem = table.getChart().getSelection();
                if(selectedItem) {
                    
                    var name = data.getValue(selectedItem[0].row, 1);
                    var product_id = data.getValue(selectedItem[0].row, 0);
                    var amount = data.getValue(selectedItem[0].row, 8);
                    var date = data.getValue(selectedItem[0].row, 6);

                    const url = './dynamic.php';
                    const dataQuery = {
                    queryMonth: product_id
                    };

                    let dataJson = "";

                    $.getJSON(url, dataQuery, (data, status) => {
                        if (status === 'success') {
                            dataJson = data;
                            
                            var data2 = new google.visualization.arrayToDataTable(data);
                            Chart(data2);
                        }
                    });
             function Chart(data2) {
                    // build the line chart ticks dynamically based on column size
                    let interval = 1;
                    let dataRange = data2.getColumnRange(1);
                    let vTicks = [];
                    for (var i = dataRange.min; i <= dataRange.max + interval; i = i + interval){
                        vTicks.push(i);
                    };

                    var chart = new google.visualization.LineChart(document.getElementById('storeGraph'));
                    var options = {
                        title: "30 days sales: " +name,
                        curveType: "function",
                         animation: {
                             "startup": true,
                             duration: 500,
                             easing: 'out'
                         },
                        vAxis: {
                            ticks: vTicks
                        },
                        hAxis: {
                            viewWindowMode: 'pretty',
                            viewWindow: {
                                min: 0
                            },
                            slantedTextAngle: 60,
                            slantedText: 1,
                        }
                    };
                    google.visualization.events.addListener(chart, 'error', function(){
                                
                                throw Error("No data for the last 30 days.");
                            });
                    chart.draw(data2, options);
                    }
                }
                
            }

            var formatter = new google.visualization.ArrowFormat(5);
            formatter.format(data, 5); // Apply formatter to date column
            
            
        }
            var tableData = <?php echo json_encode($infoTable) ?>;
            google.charts.setOnLoadCallback(function() {
            drawDashboard(tableData);
        });

其中一个建议是不要将 categoryFilter 绑定到仪表板，但是如果我不这样做，我的仪表板将不会被绘制dashboard.bind(categoryFilter, table); 这是非常令人费解的，因为仪表板不需要明确的 2 个参数？

标签： google-visualization