javascriptを使用してモーリスチャートをリフレッシュ

Question

私はこのモーリスチャートをjavascript関数を使用して更新したいと思います。だから私は、モリスのチャートを更新するJavaScriptを含むページに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

データなしでMorris Line Chartを初期化する関数を作成することができます。initMorris。次に、グラフ、ページの読み込み、リンク上のデータを設定するには、データを取得する関数getMorrisを呼び出して、setMorrisチャートにデータを設定します。これは、Morris Lineの内蔵setData関数を使用します。

は以下のスニペットてみてください（たとえば、私はgetMorrisOffline機能を作成した代わりに、onclickのページのロード中とリンクイベントでgetMorrisを使用し、Ajaxでデータを取得するには。）：

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>