1. 首頁
  2. 問答
  3. 根據複選框值切換數據與morris.js

根據複選框值切換數據與morris.js

2014-08-29 46 views
0

我在製作我想要的morris.js圖表時遇到麻煩。根據複選框值切換數據與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>

的問題是，圖表重複本身兩條線都是笑翼起來。

任何想法在哪裏調查？ （我不是要求某人爲我編寫代碼，我只是需要一些提示）。

來源

2014-08-29 D4V1D

回答

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/

來源

2014-08-29 08:16:12 D4V1D

0

我已經編輯你的代碼有一點，我在那裏得到了第三條響應被檢查的行，但是有一個錯誤會在第二行被取消選中時帶回第三行。

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

這是您的小提琴編輯了一下。並感謝你有這個問題！

來源

2014-09-03 21:20:55 maxbrockman453

+0

這不是一個錯誤。這是正常的行爲，因爲每次調用setData時都會重新定義變量'ret'，所以它不記得前一個複選框被選中。這就是爲什麼我指定我的答案適用於切換一行。如果有人願意升級我的解決方案，這很好。 – D4V1D 2014-09-04 07:28:50

相關問題

 相關問題