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