javascript - morris.js setData导致“未捕获的TypeError:无法读取未定义的属性'x'”

我正在尝试绘制一个条形图，该条形图在下拉选择更改时会更新。

以下代码包含在我的html文档中，并且leavesStayGraph函数称为下拉列表的onChange。每次第一次调用LeaveStayGraph之后，都会出现以下错误：

Uncaught TypeError: Cannot read property 'x' of undefined

在后续调用之前（调用setData时），leavesStayData看起来非常好（实际上，它看起来与第一次调用时的效果几乎相同）。

var leaveStayChart = null;
function leaveStayGraph(display_data, date) {

    /* Do stuff to get data */

    // Draw Chart
    var leaveStayData = {
        element: 'leave_stay_pie_chart',
        data: [{
            label: "Stayed",
            value: count
        }, {
            label: "Left",
            value: total - count
        }],
        xkey: 'label',
        ykeys: ['value'],
        labels: ['Count'],
        hideHover: 'auto'
    };

    if (leaveStayChart == null) {
        // FIRST CALL
        leaveStayChart = Morris.Bar(leaveStayData);
    }
    else {
        // SUBSEQUENT CALLS
        leaveStayChart.setData(leaveStayData);
    }
}

我的最终目标是在更改下拉列表的选择时更新图形，但是每次调用setData时，都会出现此错误，并且不显示任何内容。我正在改变某些事情。

更新

需要澄清的是，基本思想是这样的（取自morris.js的example的一半）。按下按钮后，图表将更新。

var x = Morris.Bar({
  element: 'bar-example',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 50,  b: 40 },
    { y: '2009', a: 75,  b: 65 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 75,  b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});

document.write("<button onClick='update()'>Test</button>");

function update() {
  x.setData({
  element: 'bar-example',
  data: [
    { y: '2006', a: 100, b: 1 },
    { y: '2007', a: 75,  b: 65 },
    { y: '2008', a: 46,  b: 40 },
    { y: '2009', a: 43,  b: 41 },
    { y: '2010', a: 50,  b: 40 },
    { y: '2011', a: 3,  b: 2 },
    { y: '2012', a: 30, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});
}

最佳答案

因此，您处在正确的轨道上，只需要将JSON数据而不是整个图对象传递给setData。因此，这将是我的代码修订版：

var leaveStayChart = null;
function leaveStayGraph(display_data, date) {

    /* Do stuff to get data */
    var graphData = [{
            label: "Stayed",
            value: count
        }, {
            label: "Left",
            value: total - count
        }];

    if (leaveStayChart == null) {
        // FIRST CALL
        leaveStayChart = Morris.Bar({
            element: 'leave_stay_pie_chart',
            data: graphData,
            xkey: 'label',
            ykeys: ['value'],
            labels: ['Count'],
            hideHover: 'auto'
        });
    }
    else {
        // SUBSEQUENT CALLS
        leaveStayChart.setData(graphData);
    }
}

关于javascript - morris.js setData导致“未捕获的TypeError:无法读取未定义的属性'x'”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31927154/