使用JavaScript刷新莫里斯图表 [英] Refresh morris chart using javascript

问题描述

我有这个莫里斯图表，我想使用JavaScript函数刷新.因此，我可以在包含该JavaScript的页面上添加href链接，以刷新morris图表.

I have this morris chart that I would like to refresh using a javascript function. So I then can add a href link on the page that contains that javascript that will refresh the morris chart.

<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函数的外观如何，我怎么称呼它?

How would that javascrip funcion look and how do I call it?

推荐答案

您可以创建一个无需数据即可初始化Morris折线图的函数:initMorris.然后要设置图表中的数据，页面加载或单击链接时，调用获取数据的函数getMorris，并使用Morris Line的内置setData函数将数据设置为图表setMorris

You can create a function that initialize your Morris Line Chart without the data: initMorris. Then to set the data in your chart, on page load or on link clicked, call the function getMorris that gets the data and set the data to the chart setMorris using the built-in setData function of the Morris Line.

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

Please try the snippet below (for the example, I created a getMorrisOffline function. To get data with ajax, use getMorris instead in page load and in the link event 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>

这篇关于使用JavaScript刷新莫里斯图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！