Sto sviluppando un sito che utilizza chart.js (www.chartjs.org).Chart.js: nascondere la serie facendo clic sulla legenda
Devo creare un grafico a linee che mostri più serie di dati, che gli utenti possono nascondere o mostrare facendo clic sul rispettivo simbolo della legenda (simile a questo http://js.syncfusion.com/demos/web/#!/azure/chart/linechart).
C'è un modo per farlo con chartjs?
Non ho trovato alcun modo per farlo. È facile mettere un po 'di comportamento onclick sul modello della legenda e puoi facilmente modificare il tratto della serie e il canale alfa dei colori su 0 in modo che l'area e il tratto scompaiano, ma non ho trovato alcun modo di farlo sui punti.
Ho deciso di utilizzare google charts per questo particolare grafico e chart.js ogni volta che non ho bisogno di questo comportamento, sperando che i buoni creatori di chart.js lo aggiungeranno in futuro.
Si può provare questo
Creare serbo per i set di dati nascosti
window.chartName = new Chart(...
window.chartName.store = new Array();
quindi utilizzare questa funzione per aggiornare tabella, devono essere manipolati cliccando sulla voce leggenda
function updateDataset(legendLi, chart, label) {
var store = chart.store;
var exists = false;
for (var i = 0; i < store.length; i++) {
if (store[i][0] === label) {
exists = true;
chart.datasets.push(store.splice(i, 1)[0][1]);
legendLi.fadeTo("slow", 1);
}
}
if (!exists) {
for (var i = 0; i < chart.datasets.length; i++) {
if (chart.datasets[i].label === label) {
chart.store.push([label, chart.datasets.splice(i, 1)[0]]);
legendLi.fadeTo("slow", 0.33);
}
}
}
chart.update();
}
non dimenticate aggiornati modello di legenda nelle opzioni del grafico
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName, '<%=datasets[i].label%>')\"><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
Poco, ho aggiunto questo gestore onclick per il componente li
<li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName , '<%=datasets[i].label%>')\"><
Per esempio fiddle
Ad esempio, attivare la riga nel grafico http://jsfiddle.net/1qjco9Ls/ – Igor
Questa risposta deve essere accettata e aumentata. – Vico
Non so perché questo non è più popolare. Mi ha aiutato molto, grazie! +1 e più se potessi – SirDerpington
onLegendClick: function (e) {
var series = e.target;
series.isVisible() ? series.hide() : series.show();
},
dxcharts hanno una funzione chiamata onLegendClick, pochi altri sono onSeriesClick e onPointClick. Spero che aiuti.
La domanda originale riguarda l'uso di ChartJS, non di dxCharts, quindi questo non è utile. – jschrab
questo è ora disponibile in Charts.js
Dalla documentazione http://www.chartjs.org/docs/#chart-configuration-legend-configuration
Leggenda configurazione
La configurazione leggenda viene passato nel namespace options.legend. Le opzioni globali per la legenda del grafico sono definite in Chart.defaults.global.legend.
onClick funzione (evento, legendItem) {} Un callback che viene chiamata quando un 'click' di eventi è registrato sulla cima di una voce di un'etichetta
onHover funzione (evento, legendItem) {} A callback che è chiamato quando un evento 'mousemove' è registrato su un elemento etichetta
Basta ridisegnare il grafico senza quella serie? – Pointy
@Pointy Mi chiedevo se esistesse un modo più semplice, autonomo e più automatico per farlo. In questo modo devo allegare dinamicamente un evento agli elementi della legenda, escludere o includere serie e ridisegno. Con molti grafici questo va rapidamente verso il caos, imo, ma grazie comunque. – pomarc
Beh, per quanto posso dire, Chart.js in particolare non ha molta sofisticazione sul supporto delle interazioni. – Pointy