Javascript 带折线图下拉列表的谷歌动画图表

我正在尝试使用开关

按钮和
下拉列表
对折线图制作动画。我有一个场景，我有一个
下拉列表
，有4种不同的状态（
绿色、红色、蓝色、黄色
），还有一个
按钮
，用于在
总计和平均时间之间切换。通过查看谷歌文档，可以在
总计
和
平均时间
之间切换。问题在于下拉列表，每当用户从下拉列表中选择status，然后绘制折线图时，我希望按状态筛选列表。我不想要。要向服务器发送请求，只需筛选列表，因为列表中已包含所有值。请让我知道我是否能做到这一点。谢谢


编辑
如果我的列是Status，则将a与CategoryFilter一起使用，但在我的示例中，我的数据表列是product1、product2、product3。。。。不是绿色，红色，蓝色。。。我在这里添加的行是Totals和Avg TimeCategoryFilter应该可以在任何列上工作——你可以使用过滤器的结果来获得total和Avg，类似于这个，抱歉，要理解其中的逻辑看起来非常困难，我添加了javascript代码来说明我现在正在做什么，请查看它，让我知道我是否可以使用CategoryFilter到我的脚本。我仍在努力理解如何在我的案例中实施。但是非常感谢您提供的信息和您的时间如果我的列是Status，那么将a与CategoryFilter一起使用会起作用，但是在我的示例中，我的DataTable列是product1、product2、product3。。。。不是绿色，红色，蓝色。。。我在这里添加的行是Totals和Avg TimeCategoryFilter应该可以在任何列上工作——你可以使用过滤器的结果来获得total和Avg，类似于这个，抱歉，要理解其中的逻辑看起来非常困难，我添加了javascript代码来说明我现在正在做什么，请查看它，让我知道我是否可以使用CategoryFilter到我的脚本。我仍在努力理解如何在我的案例中实施。但是非常感谢你的信息和时间
<script type="text/javascript">   
    google.load('visualization', '1', {packages: ['corechart']});
    function drawVisualization() {
        // Create and populate the data table for Avg Duration.
        var event_avg_data = new google.visualization.DataTable();
        event_avg_data.addColumn('string', 'Date');
        
        <g:each in="${selectedProductList}" var="prdName">
        event_avg_data.addColumn('number', '${prdName}');
        </g:each>

        event_avg_data.addRows(${prdHDates?.size()});

        <g:each in="${prdHDates}" status="i" var="prdDateString">
        event_avg_data.setValue(${i}, 0, '${prdDateString}');
        <g:each in="${selectedProductList}" status="j" var="prdName">
        event_avg_data.setValue(${i},${j+1}, <%= aggregatedList.find {it.createDate == prdDateString && it.productName == prdName}? aggregatedList.find {it.createDate == prdDateString && it.productName == prdName}.avgProcessingTime:0 %>);
        </g:each>
        </g:each>

        // Create and populate the data table for Totals.
        var event_totals_data = new google.visualization.DataTable();
        event_totals_data.addColumn('string', 'Date');

        <g:each in="${selectedProductList}" var="prdName">
        event_totals_data.addColumn('number', '${prdName}');
        </g:each>

        event_totals_data.addRows(${prdHDates?.size()});

        <g:each in="${prdHDates}" status="i" var="prdDateString">
        event_totals_data.setValue(${i}, 0, '${prdDateString}');
        <g:each in="${selectedProductList}" status="j" var="prdName">
        event_totals_data.setValue(${i},${j+1}, <%= aggregatedList.find {it.createDate == prdDateString && it.productName == prdName}? aggregatedList.find {it.createDate == prdDateString && it.productName == prdName}.totals:0 %>);
        </g:each>
        </g:each>

        // Create and draw the visualization.
        var data = [];
        data[0] = event_avg_data;
        data[1] = event_totals_data;

        var options = {
            //chartArea:{left:0,top:15,width:"50%",height:"50%"},

            width:1200,
            height:500, fontSize:12,
            vAxis: {title: "# Of Events"},
            hAxis: {title: "Date"},
            pointSize:3,smoothLine:true,
            animation:{
                duration: 1000,
                easing: 'out'
            },
        };
        var current = 0;
        // Create and draw the visualization.
        var chart = new google.visualization.LineChart(document.getElementById('data-div'));
        var button = document.getElementById('switchChart');
        function drawChart() {
            // Disabling the button while the chart is drawing.
            button.disabled = true;
            google.visualization.events.addListener(chart, 'ready',
                    function() {
                        button.disabled = false;
                        button.value = 'Switch to ' + (current ? 'Avg Duration' : 'Totals');
                        button.innerHTML = 'Switch to ' + (current ? 'Avg Duration' : 'Totals');
                    });
            options['title'] = ' ${params.reportType} Aggregation chart by '+ (current ? 'Totals' : 'Avg Duration') +'  : [${params.reportFromDate}] to [${params.reportToDate}]';
            options['vAxis'] = {title: ''+ (current ? '# of Events' : 'Avg Duration (ms)')}
            chart.draw(data[current], options);
        }
        drawChart();

        button.onclick = function() {
            current = 1 - current;
            drawChart();
        }
    }

    google.setOnLoadCallback(drawVisualization);

</script>

<div class="form-inline" name="switchForm">
<div class="form-group">
<button id="switchChart" class="btn btn-success btn-sm" value="" style="background-color: #48802C"></button>
</div>

    <div class="form-group">
        <label>Switch Status:</label>
        <g:select name="statusCode" id="statusCode"  class="form-control input-sm"
                  from="${statusList}"
                  value="${params.statusCode}"/>
    </div>
</div>