1. 홈
  2. 질의 응답
  3. morris.js와 함께 체크 박스 값을 토대로 데이터를 전환하십시오

morris.js와 함께 체크 박스 값을 토대로 데이터를 전환하십시오

2014-08-29 5 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>

문제는 그 차트 중복 자체 두 줄 쇼 wing up.

어디서 조사해야합니까? (나는 누군가 나를 위해 코드를 만들 것을 요구하지 않고있다, 나는 단지 약간의 조언이 필요하다). http://jsfiddle.net/4ztbu8oo/

출처

2014-08-29 D4V1D

답변

1

는 (한 라인을 전환 작동) 잠시 후 검사를 받으면서 응답하는 세 번째 줄이 있지만 두 번째 줄의 선택을 취소하면 세 번째 줄을 다시 가져 오는 버그가 있습니다.

/* 
* 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-08-29 08:16:12 D4V1D

0

내가 코드를 수정했습니다

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>

작업 바이올린 : 솔루션에 관심이있을 수있는 사람들을 위해

출처

2014-09-03 21:20:55 maxbrockman453

+0

이것은 버그가 아닙니다. 'setData'를 호출 할 때마다 변수'ret'가 재정의되어 이전 체크 박스를 기억하지 못하기 때문에 정상적인 동작입니다. 이것이 내 대답이 한 줄을 전환하는 데 사용되도록 지정한 이유입니다. 누군가 내 솔루션을 업그레이드하고자한다면, 좋을 것입니다. – D4V1D

 관련 문제

  • 관련 문제 없음^_^