我如何更新谷歌圖表餅圖以反映過濾的數據，但保留過濾出的細分作爲差異顏色

Question

我是新來Google圖表，我正在努力解決這個問題。

我有一個數據表（在代碼中稱爲「結果」）

Name Liquidity percent 
a  1.3  20% 
b  2.0  20% 
c  3.4  20% 
d  4  20% 
e  5  20% 

我的餅圖設置爲顯示大小相等的5段 - 20％ - 並且每個片段是藍色

我設置了「數量範圍過濾器」控制包裝來過濾流動性 - 當我將控件設置爲1到4的範圍時，餅圖移動到4個相同大小的段。

但是...我不希望它這樣做。而不是1段消失，我希望5段保持可見，並且過濾段的顏色變爲不同的顏色。

目標是我可以在視覺上看到數字過濾器中的總百分比。

編輯： 所以我有一個混亂，這就像我已經在下面納入dlaliberte的評論。

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(); 
}  

}

所以它產生具有5個藍色段的餅圖。我可以移動數字過濾器，它會觸發偵聽器事件，但我無法讓它影響餅圖上的任何內容（Chart3） - 代碼當前只是試圖將整個圖表更改爲RED，但這甚至不起作用。只是着色篩選的區段

那麼如何影響到Chart3的更改，以及如何只影響篩選的區段？

有什麼線索歡迎？

感謝

Answer 1

你可以（而且必須爲你的應用程序）使用NumberRangeFilter儀表盤之外，因爲否則將會永遠做數據過濾。相反，只需監聽NumberRangeFilter上的更改事件，獲取其當前狀態，然後遍歷圖表的顏色數組以設置適當的顏色。您必須再次使用更新後的顏色繪製圖表。這是設置顏色和重繪的循環。

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();