Morris图表如何重新加载数据（重绘）

Morris加载数据

<div id="morris-donut-example" style="height: 245px;" class="morris-chart morris-donut-example" data-replace="data-value"></div>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<!-- Morris Chart -->
<script src="assets/plugins/morris/morris.min.js"></script>
<script src="assets/plugins/raphael/raphael-min.js"></script>
<script type="text/javascript">
    var value = $("#morris-donut-example").attr("data-value");
    var $donutData = JSON.parse(value);
    Morris.Donut({
        element: 'morris-donut-example',
        data: $donutData,
        resize: true,
        colors: ['#ff8acc', '#5b69bc', "#35b8e0", "#db7256", "#10c469"]
    });
</script>

morris重新加载数据，再次调用Morris.Donut()方法，会是怎样的效果？如下：

可以看出来，图表又被加载了一次，页面已经乱的不成样子。跟DataTables重新加载数据一样，试着去网上找找官方的API去销毁或重绘图表，结果morris的github网址也打不开，只找到一个关于morris重绘的帖子，但是比较有年头，也没有任何有效的解决方案。

怎么办？自己试着搞，浏览器F12查看html代码，看到这些图表都是使用svg绘制的，那能否在每次重绘之前，将div#morris-donut-example里的元素都清空，或者把所有svg都remove掉呢？实践证明是可以的。

Morris重新加载数据

// 因找不到morris的重绘或销毁api，手动重绘
$("#morris-donut-example").empty();
$("#morris-donut-example svg").remove();
Morris.Donut({
    element: 'morris-donut-example',
    data: $newDonutData,
    resize: true,
    colors: ['#ff8acc', '#5b69bc', "#35b8e0", "#db7256", "#10c469"]
});

附上Morris三种图表的示例代码：

饼状图

//creating donut chart饼状图
var element = "morris-donut-example"; // div的id
var $donutData = [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
];
var colors = ['#ff8acc', '#5b69bc', "#35b8e0"];
Morris.Donut({
    element: element,
    data: $donutData,
    resize: true, //defaulted to true
    colors: colors
});

条形图

//creating bar chart条形图
var element = "morris-bar-example"; // div的id
var $barData  = [
    { y: '2010', a: 75 },
    { y: '2011', a: 42 },
    { y: '2012', a: 75 },
    { y: '2013', a: 38 },
    { y: '2014', a: 19 },
    { y: '2015', a: 93 }
];
var lineColors = ['#188ae2'];
var xkey = "y";
var ykeys = ['a'];
var labels = ['Statistics'];
Morris.Bar({
    element: element,
    data: $barData,
    xkey: xkey,
    ykeys: ykeys,
    labels: labels,
    hideHover: 'auto',
    resize: true, //defaulted to true
    gridLineColor: '#eeeeee',
    barSizeRatio: 0.2,
    barColors: lineColors
});

折线图

//create line chart折线图
var element = "morris-line-example";
var $lineData  = [
    { y: '2008', a: 50, b: 0 },
    { y: '2009', a: 75, b: 50 },
    { y: '2010', a: 30, b: 80 },
    { y: '2011', a: 50, b: 50 },
    { y: '2012', a: 75, b: 10 },
    { y: '2013', a: 50, b: 40 },
    { y: '2014', a: 75, b: 50 },
    { y: '2015', a: 100, b: 70 }
];
var xkey = "y";
var ykeys = ['a','b'];
var labels = ['长租','短租'];
var opacity = ['0.9'];
var Pfillcolor = ['#ffffff'];
var Pstockcolor = ['#999999'];
var lineColors = ['#10c469','#188ae2'];
Morris.Line({
    element: element,
    data: $lineData,
    xkey: xkey,
    ykeys: ykeys,
    labels: labels,
    fillOpacity: opacity,
    pointFillColors: Pfillcolor,
    pointStrokeColors: Pstockcolor,
    behaveLikeLine: true,
    gridLineColor: '#eef0f2',
    hideHover: 'auto',
    resize: true, //defaulted to true
    pointSize: 0,
    lineColors: lineColors
});

Morris图表如何重新加载数据（重绘）

Morris加载数据

Morris重新加载数据

相关推荐