Toggle data based on checkbox value with morris.js

问题

I'm getting trouble in making what I want morris.js charts to do.

My goal is to be able to toggle specific lines based on input[type=checkbox] value.

So far here's what I have done:

JS code

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']
        });
      }
    });
});

HTML code

<body>
  <div id="line-example"></div>
  <br/>
  <input type="checkbox" id="activate" checked="checked"/> Activate
</body>

The problem is that the chart duplicates itself with both lines showing up.

Any idea where to investigate to? (I'm not asking for someone to make up the code for me, I just need some tips).

回答1:

For those who might be interested in the solution (works for toggling one line):

JS code

<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>

Working Fiddle: http://jsfiddle.net/4ztbu8oo/

回答2:

I've edited your code a little bit, and I got a 3rd line in there that responds to being checked, but there's a bug that brings back the third line when the second one is unchecked.

/*
 * 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));
      }
    });
});

Here's your fiddle edited a bit. And thank you for having this question!!