Question

我正在尝试绘制一个条形图，当下拉选项发生变化时会更新。

以下代码包含在我的html doc中，而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的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']
});
}

Answer 1

所以你在正确的轨道上，你只需要将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);
    }
}

Answer 2

问题是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 }
  ]);
}

morris.js setData导致＆＃34; Uncaught TypeError：无法读取属性＆＃39; x＆＃39;未定义＆＃34;

2 个答案: