Cacher des colonnes avec des Amcharts possibles via la légende?

Je travaille actuellement sur un graphique pour afficher certaines données que j'ai, j'ai une légende configurée qui permet d'afficher/ne pas afficher certaines valeurs dans le graphique. Cependant, je me demandais si la même méthode peut être appliquée aux colonnes d'un graphique. Avec le code ci-dessous;Cacher des colonnes avec des Amcharts possibles via la légende?

<html> 
<body> 
<!-- Styles --> 
<style> 
#chartdiv { 
    width  : 100%; 
    height  : 500px; 
    font-size : 11px; 
}      
</style> 
<!-- Resources --> 
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
<!-- Chart code --> 
<script> 
var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "categoryField": "year", 
    "rotate": false, 
    "legend": { 
     "useGraphSettings": true 
    }, 
    "startDuration": 1, 
    "categoryAxis": { 
     "gridPosition": "start", 
     "position": "left" 
    }, 
    "trendLines": [], 
    "graphs": [ 
     { 
      "balloonText": "Income:[[value]]", 
      "fillAlphas": 0.8, 
      "id": "AmGraph-1", 
      "lineAlpha": 0.2, 
      "title": "Income", 
      "type": "column", 
      "valueField": "income" 
     }, 
     { 
      "balloonText": "Expenses:[[value]]", 
      "fillAlphas": 0.8, 
      "id": "AmGraph-2", 
      "lineAlpha": 0.2, 
      "title": "Expenses", 
      "type": "column", 
      "valueField": "expenses" 
     } 
    ], 
    "guides": [], 
    "valueAxes": [ 
     { 
      "id": "ValueAxis-1", 
      "position": "top", 
      "axisAlpha": 0 
     } 
    ], 
    "allLabels": [], 
    "balloon": {}, 
    "titles": [], 
    "dataProvider": [ 
     { 
      "year": 2005, 
      "income": 23.5, 
      "expenses": 18.1 
     }, 
     { 
      "year": 2006, 
      "income": 26.2, 
      "expenses": 22.8 
     }, 
     { 
      "year": 2007, 
      "income": 30.1, 
      "expenses": 23.9 
     }, 
     { 
      "year": 2008, 
      "income": 29.5, 
      "expenses": 25.1 
     }, 
     { 
      "year": 2009, 
      "income": 24.6, 
      "expenses": 25 
     } 
    ], 
    "export": { 
     "enabled": true 
    } 

}); 
</script> 
<!-- HTML --> 
<div id="chartdiv"></div>        
</body> 
</html>

(basé sur l'exemple de graphique à barres en cluster) il est possible de (de) le revenu ou les frais de sélection, mais serait-il aussi capable d'avoir une légende (de) sélectionner les années séparées? Par exemple. complètement cacher 2006 tout en montrant les autres années ou seulement montrant 2005 et 2009.?

J'ai regardé autour et j'ai trouvé some discussions ressemblant au problème que j'ai, mais ils ne correspondent pas exactement ce que je cherche.

Des pensées?

Source

2017-09-20 KRAD

Cela ne peut pas être fait en utilisant la légende d'amCharts. Au lieu de cela, vous devez modifier votre fournisseur de données et actualiser votre graphique.

Par exemple, si vous vouliez cacher 2007 de votre tableau:

HTML

<button type="button" onclick="hideYear(2007)">hide 2007</button>

var my_data = [ 
    { 
     "year": 2005, 
     "income": 23.5, 
     "expenses": 18.1 
    }, 
    { 
     "year": 2006, 
     "income": 26.2, 
     "expenses": 22.8 
    }, 
    { 
     "year": 2007, 
     "income": 30.1, 
     "expenses": 23.9 
    }, 
    { 
     // ... 
    } 
]; 

// create your chart initially using all data 
var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "dataProvider": my_data, 
    // ... 
}); 

function hideYear(year){ 

    var new_dataprovider = []; 

    // loop over my_data 
    my_data.forEach(function(item){ 
    if(item.year != year){ 
     new_dataprovider.push(item); 
    } 
    }); 

    // now that we have our new dataprovider 
    // excluding a certain year, 
    // update our chart 
    chart.dataProvider = new_dataprovider; 

    // validateData will refresh the chart 
    chart.validateData(); 

}

En fonction de votre configuration graphique, cela cacher la année 2007 complètement (de l'axe de la catégorie). Au lieu de laisser de côté l'élément de données, vous pouvez définir les champs "revenu" et "dépenses" sur null, afin que l'année (catégorie) elle-même reste visible.

Espérons que cela a du sens.

Source

2017-09-21 07:24:53 Robbert

Merci, cela m'a vraiment aidé sur mon chemin! J'ai élargi le code pour inclure une sélection dynamique d'années, et permettre également de montrer à nouveau les années cachées. L'exemple de code peut être trouvé [ici] (https://jsbin.com/vanoqupito/edit?html,output)! – KRAD

Peut-être avez-vous une idée de comment résoudre ce problème? (Https://stackoverflow.com/questions/46522892/amcharts-removing-columns-from-dataprovider-with-validatedata-not-working)? – KRAD

Merci à @Robbert pour fournir le code de comment cacher une colonne. Je l'ai travaillé plus loin et maintenant vous êtes capable de cacher plusieurs colonnes à la fois et de les montrer à nouveau avec un menu de sélection et deux boutons. Le code complet est ci-dessous ou peut être trouvé dans un exemple de travail here.

<html> 
<body> 
<style> 
#chartdiv { 
    width  : 100%; 
    height  : 500px; 
    font-size : 11px; 
}      
</style> 
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
<script> 
var my_data = [ 
    { 
     "year": 2005, 
     "income": 23.5, 
     "expenses": 18.1 
    }, 
    { 
     "year": 2006, 
     "income": 26.2, 
     "expenses": 22.8 
    }, 
    { 
     "year": 2007, 
     "income": 30.1, 
     "expenses": 23.9 
    }, 
    { 
     "year": 2008, 
     "income": 26.1, 
     "expenses": 24.4 
    }, 
    { 
     "year": 2009, 
     "income": 24.1, 
     "expenses": 23.7 
    } 
]; 

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "categoryField": "year", 
    "rotate": false, 
    "legend": { 
     "useGraphSettings": true 
    }, 
    "startDuration": 1, 
    "categoryAxis": { 
     "gridPosition": "start", 
     "position": "left" 
    }, 
    "trendLines": [], 
    "graphs": [ 
     { 
      "balloonText": "Income:[[value]]", 
      "fillAlphas": 0.8, 
      "id": "AmGraph-1", 
      "lineAlpha": 0.2, 
      "title": "Income", 
      "type": "column", 
      "valueField": "income" 
     }, 
     { 
      "balloonText": "Expenses:[[value]]", 
      "fillAlphas": 0.8, 
      "id": "AmGraph-2", 
      "lineAlpha": 0.2, 
      "title": "Expenses", 
      "type": "column", 
      "valueField": "expenses" 
     } 
    ], 
    "guides": [], 
    "valueAxes": [ 
     { 
      "id": "ValueAxis-1", 
      "position": "top", 
      "axisAlpha": 0 
     } 
    ], 
    "allLabels": [], 
    "balloon": {}, 
    "titles": [], 
    "dataProvider": my_data, 
    "export": { 
     "enabled": true 
    } 
}); 
var hiddenYears = []; 
function hideYear(){ 
    var selection = document.getElementById("yearSelection"); 
    var selectedYear = Number(selection.options[selection.selectedIndex].value); 
    hiddenYears.push(selectedYear); 

    var new_dataprovider = []; 

    // loop over my_data 
    my_data.forEach(function(item){ 
     if(!hiddenYears.includes(item.year)){ 
      new_dataprovider.push(item); 
     } 
    }); 

    // now that we have our new dataprovider 
    // excluding a certain year, 
    // update our chart 
    chart.dataProvider = new_dataprovider; 

    // validateData will refresh the chart 
    chart.validateData(); 
} 
function showYear(){ 
    var selection = document.getElementById("yearSelection"); 
    var selectedYear = Number(selection.options[selection.selectedIndex].value); 
    var index = hiddenYears.indexOf(selectedYear); 
    if (index > -1) { 
     hiddenYears.splice(index, 1); 
    } 
    var new_dataprovider = []; 
    my_data.forEach(function(item){ 
     if(!hiddenYears.includes(item.year)){ 
      new_dataprovider.push(item); 
     } 
    }); 
    // now that we have our new dataprovider 
    // excluding a certain year, 
    // update our chart 
    chart.dataProvider = new_dataprovider; 
    // validateData will refresh the chart 
    chart.validateData(); 
} 
</script> 
<div id="chartdiv"></div>  
<select id="yearSelection"> 
    <option>Select a year</option> 
</select> 
<script> 
var select = document.getElementById("yearSelection"); 
var options = [2005, 2006, 2007, 2008, 2009]; 
for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 
} 
</script> 
<button type="button" onclick="hideYear(document.getElementById('yearSelection'))">Hide</button> 
<button type="button" onclick="showYear(document.getElementById('yearSelection'))">Show</button> 
</body> 
</html>

Source

2017-09-21 18:25:59 KRAD

Cacher des colonnes avec des Amcharts possibles via la légende?

Répondre

Questions connexes