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

落日映苍穹つ 2022-02-05 13:21 335阅读 0赞

### Morris加载数据 ###

<div id="morris-donut-example" style="height: 245px;" class="morris-chart morris-donut-example" data-replace="data-value"></div>
    
    <script src="assets/js/jquery.min.js"></script>
    
    <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()**方法，会是怎样的效果？如下：

![https://img-blog.csdnimg.cn/20190505224449693.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd6ZWhhbw==,size\_16,color\_FFFFFF,t\_70][https_img-blog.csdnimg.cn_20190505224449693.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd6ZWhhbw_size_16_color_FFFFFF_t_70]

可以看出来，图表又被加载了一次，页面已经乱的不成样子。跟[DataTables重新加载数据][DataTables]一样，试着去网上找找官方的API去销毁或重绘图表，结果morris的github网址也打不开，只找到一个关于[morris重绘][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
    });

[https_img-blog.csdnimg.cn_20190505224449693.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd6ZWhhbw_size_16_color_FFFFFF_t_70]: /images/20220205/017798e2b96747b3ba34b88ae598bd66.png
[DataTables]: https://blog.csdn.net/songzehao/article/details/89712225
[morris]: https://bbs.csdn.net/topics/392162903