Comment puis-je mettre à jour un graphique à secteurs de Google Maps pour refléter les données filtrées tout en conservant les segments filtrés en tant que couleur diff

Question

Je suis nouveau sur Google Charts et j'ai du mal à résoudre ce problème.

J'ai un datatable (appelé "résultat" dans le code)

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

Mon camembert est réglé pour afficher 5 segments de taille égale - 20% - et chaque segment est bleu

I J'ai mis un filtre de contrôle 'Number Range Filter' pour filtrer la liquidité - quand j'ai réglé le contrôle sur la plage de 1 à 4, le tarte se déplace en 4 segments de taille égale.

MAIS ... Je ne veux pas qu'il le fasse. Au lieu de la disparition d'un segment, je veux que les cinq segments restent visibles et que la couleur du segment filtré change pour être d'une couleur différente. Le but étant que je puisse voir visuellement un pourcentage total qui tombe dans le filtre de nombre.

EDIT: J'ai eu déconner et cela est aussi loin que j'ai incorporer le commentaire de dlaliberte ci-dessous.

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

}

il produit le diagramme circulaire avec 5 segments bleus. Je peux déplacer le filtre de nombres et cela déclenche l'événement d'écoute mais je n'arrive pas à l'affecter sur le diagramme (Chart3) - Le code tente actuellement de changer tout le graphique en ROUGE mais cela ne fonctionne même pas le juste colorier les segments filtrés

Alors, comment puis-je effectuer les changements dans Chart3 et comment puis-je affecter uniquement les segments filtrés ?.

des indices bienvenus?

grâce

Answer 1

Vous pouvez (et doit, pour votre application) utilisent un NumberRangeFilter en dehors d'un tableau de bord, car il faire autrement toujours le filtrage des données. Au lieu de cela, écoutez simplement les événements de changement sur le NumberRangeFilter, obtenez son état actuel, puis parcourez le tableau de couleurs de votre graphique pour définir les couleurs appropriées. Vous devrez à nouveau dessiner le graphique avec les couleurs mises à jour. Voici la boucle pour définir les couleurs et redessiner.

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