Question

我有这个morris图表，我想用javascript函数刷新。所以我然后可以在页面上添加一个href链接，其中包含将刷新morris图表的javascript。

＆＃13;

<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>


<script>
  // Initialize Firebase
  var config = {
    apiKey: "XXX",
    authDomain: "XXX.firebaseapp.com",
    databaseURL: "https://XXXX.firebaseio.com",
    storageBucket: "XXX.appspot.com",
    messagingSenderId: "XXX"
  };
  firebase.initializeApp(config);
</script>

<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>

＆＃13;

javascrip funcion看起来怎么样？我怎么称呼它？

Answer 1

您可以创建一个函数来初始化没有数据的Morris折线图：initMorris。然后，要设置图表中的数据，页面加载或点击链接，请调用获取数据的函数getMorris，并使用内置{{1}将数据设置为图表setMorris莫里斯线的功能。

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

＆＃13;

getMorris

＆＃13;

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);
}

＆＃13;

使用javascript刷新morris图表

1 个答案: