javascript - Morris.js - 是否有任何 Setter 方法？

Question

我有morris.js 的setter 函数吗？ ？我浏览了他们的文档，似乎只有一个使用 setData() 更改数据点值的示例.

但是当您更改数据时，您可能需要更改 x/y 轴上的标签或更改其他选项。那么，morris.js 上有没有通用的 setter 方法？

Answer 1

检查 script 后和 setData() 函数我发现没有任何 setter 函数。但是可以像下面这样重置和重绘选项。

在 js 文件上启动图表(硬编码)

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

动态更新图表选项

现在假设我们想通过 AJAX 添加一些新数据，并想更改标签的 xLabelFormat 函数和 xLabelAngle。

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

了解这一点非常重要，为了更新图表，我们需要调用redraw() 方法，例如window.myAreaChart.redraw() 。否则图表不会更新。我们没有在上面的例子中调用 redraw()，因为 setData() 方法调用了它，所以不需要调用它两次。但是，如果您不使用 setData()，则需要调用 redraw() 以直观地更新图表。