Morris.Donut 图形在调用 setData() 后消失

Question

我尝试通过调用 setData() 来更新 Morris.Donut 图。但是在执行 setData() 方法后，图形消失了。我在网上搜索过，但没有找到解决我的问题的方法。

我在这里所做的是：

    1) Initialize a Morris.Donut object
    2) Make a button. When I click on the button, I will update the graph with new data.

当我运行我的代码时，图表显示 here。但是在点击按钮更新图表后，图表消失了。

我的代码

<div id="donut-chart" style="height: 200px;" data-width="100"></div>
<button type='button' class='update-chart'>Update chart</button>

<script type="text/javascript">

    $(document).ready(function () {

        // Initialize a Morris.Donut object
        donut_chart = Morris.Donut({
            element: 'donut-chart',
            data: [
                {'label': 'Yes', 'value': 1},
                {'label': 'No', 'value': 0},
            ]
        });

        // Update the Morris.Donut object
        $('.update-chart').on('click', function(){
            line = {
                element: 'donut-chart',
                data: [
                    {'label': 'Yes', 'value': 2},
                    {'label': 'No', 'value': 0},
                ],
            };

            donut_chart.setData(line);  // This code makes the graph disapears
        });
    });

</script>

Answer 1

你应该写donut_chart.setData(line.data);

您不需要使用 setData 传递元素。

Morris.Donut 图形在调用 setData() 后消失

Morris.Donut graph disappears after calling setData()

morris.js