Ho problemi a fare quello che voglio morris.js grafici da fare.
Il mio obiettivo è essere in grado di alternare linee specifiche in base a input[type=checkbox] valore.
Finora ecco cosa ho fatto:
Codice JS
var morris = Morris.Line({
element: "line-example",
data: [
{ y: "2006", a: 100, b: 90 },
{ y: "2007", a: 75, b: 65 },
{ y: "2008", a: 50, b: 40 },
{ y: "2009", a: 75, b: 65 },
{ y: "2010", a: 50, b: 40 },
{ y: "2011", a: 75, b: 65 },
{ y: "2012", a: 100, b: 90 }
],
xkey: "y",
ykeys: ["a", "b"],
labels: ["Series A", "Series B"]
});
jQuery(function($) {
$("#activate").on("change", function() {
var isChecked = $(this).is(":checked");
console.log(isChecked);
if(!isChecked) {
morris = Morris.Line({
element: "line-example",
ykeys: ["a"]
});
}
});
});
Codice HTML
<body>
<div id="line-example"></div>
<br/>
<input type="checkbox" id="activate" checked="checked"/> Activate
</body>
Il problema è che il grafico si duplica con entrambe le linee visualizzate.
Qualche idea su dove indagare? (Non sto chiedendo a qualcuno di inventare il codice per me, ho solo bisogno di alcuni suggerimenti).
risposte:
1 per risposta № 1Per coloro che potrebbero essere interessati alla soluzione (funziona per alternare una riga):
Codice JS
<script>
function data(toggle) {
var ret = [
{ y: "2006", a: 100, b: 90 },
{ y: "2007", a: 75, b: 65 },
{ y: "2008", a: 50, b: 40 },
{ y: "2009", a: 75, b: 65 },
{ y: "2010", a: 50, b: 40 },
{ y: "2011", a: 75, b: 65 },
{ y: "2012", a: 100, b: 90 }
];
if(toggle == 1) {
for(var i = 0; i < ret.length; i++)
delete ret[i].b;
}
return ret;
};
var morris = Morris.Line({
element: "line-example",
data: data(),
xkey: "y",
ykeys: ["a", "b"],
labels: ["Series A", "Series B"]
});
jQuery(function($) {
$("#activate").on("change", function() {
var isChecked = $(this).is(":checked");
if(isChecked)
{
morris.setData(data(0));
} else {
morris.setData(data(1));
}
});
});
</script>
Fiddle di lavoro: http://jsfiddle.net/4ztbu8oo/
0 per risposta № 2
Ho modificato un po 'il tuo codice e ho una terza riga che risponde al controllo, ma c'è un bug che riporta la terza riga quando la seconda è deselezionata.
/*
* Play with this code and it"ll update in the panel opposite.
*
* Why not try some of the options above?
*/
function data(toggle) {
var ret = [
{ y: "2006", a: 100, b: 90, c:80},
{ y: "2007", a: 75, b: 65, c:80 },
{ y: "2008", a: 50, b: 40, c:80 },
{ y: "2009", a: 75, b: 65, c:80 },
{ y: "2010", a: 50, b: 40, c:80 },
{ y: "2011", a: 75, b: 65, c:80 },
{ y: "2012", a: 100, b: 90, c:80 }
];
if(toggle == 1) {
for(var i = 0; i < ret.length; i++)
delete ret[i].b;
}
if(toggle == 2) {
for(var i = 0; i < ret.length; i++)
delete ret[i].c;
}
return ret;
};
var morris = Morris.Line({
element: "line-example",
data: data(),
xkey: "y",
ykeys: ["a", "b", "c"],
labels: ["Series A", "Series B", "Series C"]
});
jQuery(function($) {
$("#activate").on("change", function() {
var isChecked = $(this).is(":checked");
if(isChecked)
{
morris.setData(data(0));
} else {
morris.setData(data(1));
}
});
});
jQuery(function($) {
$("#activate1").on("change", function() {
var isChecked = $(this).is(":checked");
if(isChecked)
{
morris.setData(data(0));
} else {
morris.setData(data(2));
}
});
});
Ecco il tuo violino modificato un po '. E grazie per avere questa domanda !!
0 per risposta № 3
Ho creato un wrapper per morrisjs che ti consente di alternare i dati.
https://github.com/vadimmanaev/morrisjs-toggle