使用 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将数据设置到图表中。setMorrissetData

请尝试下面的代码片段（例如，我创建了一个getMorrisOffline函数。要使用ajax获取数据，请getMorris在页面加载和链接事件onclick中使用）：

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>