Question

我在制作我想要的morris.js图表时遇到了麻烦。

我的目标是能够根据input[type=checkbox]值切换特定行。

到目前为止，我所做的一切：

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

HTML代码

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

问题是图表重复出现，两行都显示出来。

知道在哪里调查吗？（我不是要求别人为我编写代码，我只需要一些提示）。

Answer 1

对于那些可能对解决方案感兴趣的人（适用于切换一行）：

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>

工作小提琴：http://jsfiddle.net/4ztbu8oo/

Answer 2

我已经编辑了一下你的代码了，我在那里得到了第3行响应被检查，但是当第二行没有被检查时，有一个错误会带回第三行。

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

这是你的小提琴编辑了一下。谢谢你提出这个问题!!

Answer 3

我为morrisjs创建了一个包装器，允许您切换数据。

https://github.com/vadimmanaev/morrisjs-toggle

使用morris.js根据复选框值切换数据

3 个答案: