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

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

javascript jquery

Javascript 使用morris.js根据复选框值切换数据,javascript,jquery,toggle,lines,morris.js,Javascript,Jquery,Toggle,Lines,Morris.js,我在制作我想要的morris.js图表时遇到了麻烦我的目标是能够根据输入[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

我在制作我想要的

morris.js

图表时遇到了麻烦

我的目标是能够根据

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

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

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

HTML代码

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

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

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




激活

问题是图表会重复自身，同时显示两条线

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

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

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

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

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


功能数据（切换）{
变量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}
];
如果（切换==1）{
对于（变量i=0；i


工作提琴：
我对您的代码进行了一点编辑，其中有第三行响应被检查，但有一个错误，当第二行未检查时，会返回第三行
/*
 * 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));
      }
    });
});

/*
*使用此代码，它将在对面的面板中更新。
*
*为什么不试试上面的一些选项呢？
*/
功能数据（切换）{
变量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}
];
如果（切换==1）{
对于（变量i=0；i

这是你的小提琴，稍加修改。谢谢你提出这个问题
 我为morrisjs创建了一个包装器，允许您切换数据
这不是一个bug。这是正常行为，因为每次调用setData
时都会重新定义变量ret
，因此它不记得前面选中的复选框。这就是为什么我指定我的答案适用于切换一行。如果有人愿意升级我的解决方案，这将是很好的。