如何按数据集索引过滤分组的条形图？

Question

我最近开始使用ChartJS，却遇到了将过滤器应用于分组的条形图的问题。

我正在测量网站中某些页面的响应时间，并且在每个页面中，有一些操作（例如单击按钮）具有各自的响应时间。结果是我创建了一个图表，该图表将每个响应时间按操作分组。

绘制图表后，我可以使用默认图例来过滤每个系列，但我希望能够通过操作来应用过滤器。

根据我的研究，大多数问题都与序列过滤有关，而不是显示/隐藏每个数据集的特定索引。一种可能的解决方案是仅使用必要的数据重绘整个图表，但是由于它来自AJAX调用，因此最好避免在每次有人更改过滤器下拉菜单时都调用它。

我已经为每个动作标签添加了一个下拉列表，并且在该下拉菜单的“ OnChange”方法中，它应该仅显示每个系列的选定动作。

示例代码：Here

下拉菜单的OnChange函数如下：

function FilterByEvent(dropdown){
  var chartName = dropdown.id.replace('_filter', 'Chart');
  var chart = null;
  var selectedIndex = dropdown.options[dropdown.selectedIndex].value;

  Chart.helpers.each(Chart.instances, function (instance) {
    if (instance.chart.canvas.id == chartName)
      chart = instance.chart;
  })

  if (chart != null){
    $.each(chart.config.data.datasets, function (index, value) {
      value.data = [value.data[selectedIndex]];
    });  
    chart.config.data.labels = [chart.config.data.labels[selectedIndex]];
    chart.update();
  }
}

使用当前功能，我只能选择所需的数据集，但是会丢失所有其他信息。

如果我更改为其他操作，结果将是一个空图表，因为很明显，数据已在第一个过滤器中删除。

预期结果是能够根据过滤器中选择的操作来过滤数据集索引，而不会丢失数据集。

是否仍然可以使用ChartJS进行此操作，还是应该将数据保存在本地变量中，然后重新填充每个过滤器中的数据集？