使用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 函数看起来如何，我该如何称呼它？

Answer 1

您可以创建一个在没有数据的情况下初始化莫里斯折线图的函数：initMorris。然后要在图表中设置数据，在页面加载或单击链接时，调用获取数据的函数getMorris 并使用莫里斯线的内置函数setData 将数据设置到图表setMorris .

请尝试下面的 sn-p（例如，我创建了一个 getMorrisOffline 函数。要使用 ajax 获取数据，请在页面加载和链接事件 onclick 中使用 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>