Morris.js - 有没有Setter方法？

Question

I there any setter function for morris.js ? I've been through their documentation and it seems there is only one example of changing values of the data points using setData() .

But when you change data you might need to change labels on the x/y axis or change other options too. So, is there any general setter method on morris.js?

Answer 1

After inspecting the script and setData() function I've found there isn't any setter function. But options can be reset and redraw like below.

Initiate the Chart on js file (Hard Coded)

var options = {
            element : 'lead-summery',
            data : xChart.leads,
            xkey: 'date',
            ykeys: ['total', 'bananas', 'apples', 'oranges'],
            labels:['Total', 'Bananas', 'Apples', 'Oranges'],
            lineColors:['#E67A77', '#D9DD81', '#79D1CF'],
            fillOpacity: 0.2,
            behaveLikeLine: true,
            lineWidth: 1
        };

        // you must save the cart in a global variable
        window.myAreaChart = Morris.Area(options); 

Dynamically Update The Chart Options

Now say we want to Add some new data via AJAX and want to change xLabelFormat function and xLabelAngle for labels.

var data = {}; // we get this from ajax call or whatever

// now we update the options

// xLabelFormat callback function
window.myAreaChart.options.xLabelFormat = function(date){
    return formatDate(date);
}

// xLabelAngle
window.myAreaChart.xLabelAngle = 60;

// add data and update the chart
window.myAreaChart.setData(data);

It is very important to understand that in order to update the chart we need to call redraw() method for example window.myAreaChart.redraw() . Otherwise the chart won't update. We did not call redraw() on the example above because the setData() method calls it so no need for call it twice. But if you do not use setData() you will need to call redraw() in order to update the chart visually.