Dynamic 如何更新Google Charts饼图以反映过滤后的数据，但将过滤后的部分保留为不同颜色

我是谷歌图表的新手，我正在努力解决这个问题

我有一个数据表（代码中称为“result”）

我的饼图设置为显示5个大小相等的段（20%），每个段都是蓝色的

我已经设置了一个“数字范围过滤器”控件包装来过滤流动性-当我将控件设置为范围1到4时，饼图将移动到4个大小相等的段

但是。。。我不想让它这样做。与1段消失不同，我希望5段保持可见，过滤段的颜色改变为不同的颜色

其目的是，我可以直观地看到数字过滤器中的总百分比

编辑： 所以我把事情搞得一团糟，这就是我在下面引用德拉利伯特的评论所能做到的

function drawChart3(chartData3) {
  var result = google.visualization.arrayToDataTable(chartData3,false); // 'false' means that the first row contains labels, not data.
  var chart3 = new google.visualization.ChartWrapper({
  'chartType': 'PieChart',
  'containerId': 'chart3_div',
  'dataTable': result,
  'options': {
    'width': 500,
    'height': 500,
    'legend': {position: 'none'},
    'pieSliceText': 'none',
    'colors': ['blue']
     },
  'view': {'columns': [0 , 1]}
}); 




   var liquidityDT = new google.visualization.DataTable();
  // Declare columns
  liquidityDT.addColumn('number', 'Liquidity');
        // Add data.
  liquidityDT.addRows([
    [1],
    [2],                             
    [3],                           
    [4],
    [5],
    ]);

// Create a range slider, passing some options
  var liquidityRangeSlider = new google.visualization.ControlWrapper({
  'controlType': 'NumberRangeFilter',
  'containerId': 'filter3_div',
  'dataTable': liquidityDT,
  'options': {
    'filterColumnLabel': 'Liquidity',
    'minValue': 0,
    'maxValue': 5
  }
});

 liquidityRangeSlider.draw();
 chart3.draw();

 google.visualization.events.addListener(liquidityRangeSlider, 'statechange', setChartColor);

function setChartColor(){
  var state = liquidityRangeSlider.getState();
  var stateLowValue = state.lowValue;
  var stateHighValue = state.highValue;
  for (var i = 0; i < result.getNumberOfRows(); i++) {

    var testValue = result.getValue(i,2);
    if (testValue < stateLowValue || testValue > stateHighValue){
    alert("attempting to set colors")
    //this bit I have no clue how to change the color of the table row currently being iterated on 
    chart3.setOption({'colors' : ['red']});
    }
   }
   chart3.draw();
 }    

函数drawChart3（chartData3）{
var result=google.visualization.arrayToDataTable（chartData3，false）；//“false”表示第一行包含标签，而不是数据。
var chart3=新的google.visualization.ChartWrapper({
'chartType'：'PieChart'，
“集装箱运输”：chart3_div，
“dataTable”：结果，
“选项”：{
“宽度”：500，
‘高度’：500，
'图例'：{位置：'无'}，
“文本”：“无”，
“颜色”：[“蓝色”]
},
“视图”：{“列”：[0，1]}
}); 
var liquidityDT=new google.visualization.DataTable（）；
//声明列
liquidityDT.addColumn（'number'，'Liquidity'）；
//添加数据。
liquidityDT.addRows([
[1],
[2],                             
[3],                           
[4],
[5],
]);
//创建一个范围滑块，传递一些选项
var liquidityrangelider=new google.visualization.ControlWrapper({
“controlType”：“NumberArrangeFilter”，
‘货柜船’：‘过滤器3_div’，
“数据表”：liquidityDT，
“选项”：{
“filterColumnLabel”：“流动性”，
“minValue”：0，
“最大值”：5
}
});
liquidityrangelider.draw（）；
图3.draw（）；
google.visualization.events.addListener（LiquidityRangeSlaider，'statechange'，setChartColor）；
函数setChartColor（）{
var state=liquidityrangelider.getState（）；
var stateLowValue=state.lowValue；
var stateHighValue=state.highValue；
对于（var i=0；istateHighValue）{
警报（“正在尝试设置颜色”）
//这一点我不知道如何更改当前正在迭代的表行的颜色
图表3.setOption（{'colors'：['red']}）；
}
}
图3.draw（）；
}    

}

因此，它生成了带有5个蓝色分段的饼图。我可以移动数字过滤器，它会触发listener事件，但我无法让它影响piechart（图表3）上的任何内容-代码当前仅尝试将整个图表更改为红色，但这甚至不起作用，更不用说只对过滤后的部分着色了

那么，我如何影响对图表3的更改，以及如何只影响过滤后的片段呢

欢迎提供线索

谢谢

对于您的应用程序，您可以（并且必须）在仪表板之外使用NumberArrangeFilter，因为否则它将始终执行数据过滤。相反，只需侦听NumberArrangeFilter上的更改事件，获取其当前状态，然后遍历图表的颜色数组以设置适当的颜色。你必须用更新后的颜色再次绘制图表。这里是设置颜色和重画的循环

var colors = [];
for (var i = 0; i < result.getNumberOfRows(); i++) { 
  var color = (testValue < stateLowValue || testValue > stateHighValue) ? 'red' : 'blue';
  colors.push(color);
} 
chart3.setOption('colors', colors);
chart3.draw();

var colors=[]；
对于（var i=0；istateHighValue）？“红色”：“蓝色”；
颜色。推送（颜色）；
} 
图表3.设置选项（“颜色”，颜色）；
图3.draw（）；

谢谢您的留言。我已经按照你的建议对问题进行了一些代码编辑。我仍在努力改变图表上的过滤器。。。。。我错过了什么？越来越近了。颜色值是一个数组，每个系列一个。在PieChart的情况下，每行有一种颜色。对于行中的每个迭代，您也会重新绘制一次图表，但是在收集所有颜色的数组后，您应该只重新绘制一次。编辑我的答案。啊，很好。我明白了。这回答了我的问题。实际上，我现在决定做一些不同的事情，并没有给每个单独的系列上色，而是循环遍历原始表的每一行，并将%列添加到一个新的数据表中，其中只有两行，一行表示过滤元素的总数，另一行表示非过滤元素。这样的话，我只得到了两个片段，加起来是100%。非常感谢

var colors = [];
for (var i = 0; i < result.getNumberOfRows(); i++) { 
  var color = (testValue < stateLowValue || testValue > stateHighValue) ? 'red' : 'blue';
  colors.push(color);
} 
chart3.setOption('colors', colors);
chart3.draw();