Morris加载数据

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

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

怎么办？自己试着搞， 浏览器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的idvar $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的idvar $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});