morris.js setData causes "Uncaught TypeError: Cannot re

morris.js setData causes "Uncaught TypeError: Cannot read property 'x' of undefined"

本文关键字：TypeError Uncaught Cannot re quot js setData causes morris      更新时间：2023-09-26

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

下面的代码包含在我的html文档中，并且leaveStayGraph函数被称为onChange of dropdown。每次在第一次调用leaveStayGraph之后，我得到以下错误:

Uncaught TypeError: Cannot read property 'x' of undefined

在后续调用之前(当调用setData时)，leaveStayData看起来非常好(实际上它看起来与第一次调用时几乎相同，并且有效)。

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的例子)。当按下按钮时，图表更新。

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

问题是setData不接受传递给Morris.Bar(data)的相同类型的对象。传入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 }
  ]);
}
相关文章：