자바 스크립트를 사용하여 모리스 차트 새로 고침

Question

자바 스크립트 기능을 사용하여 새로 고침하고 싶은 모리스 차트가 있습니다. 그래서 나는 모리스 차트를 새로 고칠 자바 스크립트가 들어있는 페이지에 href 링크를 추가 할 수 있습니다.

<script type="text/javascript"> 
 
    $.get('@Url.Action("GetData")', function (result) { 
 
     Morris.Line({ 
 
      element: 'samplechart', 
 
      data: result, 
 
      xkey: 'period', 
 
      ykeys: ['a', 'b'], 
 
      labels: ['YES', 'NO'], 
 
      xLabelAngle: 60, 
 
      parseTime: false, 
 
      resize: true, 
 
      lineColors: ['#32c5d2', '#c03e26'] 
 
     }); 
 
    }); 
 
</script>

는 javascrip의 funcion의 모습과 어떻게 그것을 어떻게 부릅니까 것입니다?

Answer 1

데이터없이 모리스 챠트 차트를 초기화하는 함수를 만들 수 있습니다 : initMorris. 그런 다음 차트, 페이지로드 또는 클릭 된 데이터에서 데이터를 설정하려면 데이터를 가져 오는 getMorris 함수를 호출하고 모리스 라인의 setData 함수를 사용하여 setMorris 차트에 데이터를 설정합니다.

아래의 조각 시도하십시오 (예를 들어, 나는 getMorrisOffline 기능을 생성하는 대신 온 클릭 페이지로드와 링크 이벤트 getMorris를 사용, 아약스와 데이터를 얻을 수 있습니다.) :

var morrisLine; 
 
initMorris(); 
 
//getMorris(); 
 
getMorrisOffline(); 
 

 
function initMorris() { 
 
    morrisLine = Morris.Line({ 
 
    element: 'samplechart', 
 
    xkey: 'period', 
 
    ykeys: ['a', 'b'], 
 
    labels: ['YES', 'NO'], 
 
    xLabelAngle: 60, 
 
    parseTime: false, 
 
    resize: true, 
 
    lineColors: ['#32c5d2', '#c03e26'] 
 
    }); 
 
} 
 

 
function setMorris(data) { 
 
    morrisLine.setData(data); 
 
} 
 

 
function getMorris() { 
 
    $.get('@Url.Action("GetData")', function (result) { 
 
    setMorris(result);  
 
    }); 
 
} 
 

 
function getMorrisOffline() { 
 
var lineData = [ 
 
    { period: '2006', a: 100, b: 90 }, 
 
    { period: '2007', a: 75, b: 65 }, 
 
    { period: '2008', a: 50, b: 40 }, 
 
    { period: '2009', a: 75, b: 65 }, 
 
    { period: '2010', a: 50, b: 40 }, 
 
    { period: '2011', a: 75, b: 65 }, 
 
    { period: '2012', a: 100, b: 90 } 
 
    ]; 
 
    setMorris(lineData); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" /> 
 

 
<div id="samplechart"></div> 
 
<a href="#" onclick="getMorrisOffline();">Refresh Morris</a>