Javascript morris.js setData causes“；未捕获类型错误：无法读取属性'；x'；“未定义”的定义；

我试图画一个条形图，当下拉选择改变时，它会被更新

下面的代码包含在我的html文档中，leaveStayGraph函数在下拉菜单的更改中被调用。每次调用第一次leaveStayGraph后，我都会得到以下错误：

Uncaught TypeError: Cannot read property 'x' of undefined

在后续调用之前（当调用setData时），leaveStayData看起来非常好（事实上，它看起来与第一次调用时几乎相同，这是有效的）

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

更新

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

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']
});
}

var x=Morris.Bar({
元素：“条形图示例”，
数据：[
{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']，
标签：[“A系列”、“B系列”]
});
文件。编写（“测试”）；
函数更新（）{
x、 设置数据({
元素：“条形图示例”，
数据：[
{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']，
标签：[“A系列”、“B系列”]
});
}

问题在于setData不接受传递到

Morris.Bar（数据）

的相同类型的对象。传递到setData函数的对象是原始对象中

data

下的值

这将是修订后的示例代码：

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([
    { 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 }
  ]);
}

var x=Morris.Bar({
元素：“条形图示例”，
数据：[
{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']，
标签：[“A系列”、“B系列”]
});
文件。编写（“测试”）；
函数更新（）{
x、 设置数据([
{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}
]);
}

因此，您的思路是正确的，只需将JSON数据传递给setData，而不是整个graph对象。因此，这将是我对您的代码的修订版本：

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);
    }
}

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);
    }
}