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

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一起传递。