javascript - 未捕获的类型错误 : Cannot read property 'mouseX' of undefined

Question

我正在使用 AmCharts 制作随时间推移付款的图表。

我的 AmCharts 配置看起来正确。

另请注意，我不是 Javascript 专家。

使用 AmCharts 3.18.3.free

完整的控制台输出是

Uncaught TypeError: Cannot read property 'mouseX' of undefined @ amcharts.js:4107
d.ChartCursor.d.Class.update @ amcharts.js:4107
e.AmRectangularChart.e.Class.update @ serial.js:346
e.AmSerialChart.e.Class.update @ serial.js:980
d.update @ amcharts.js:196

我也在使用RainbowVis-JS .

newdata = [{"date":"2015-12-01T00:00:00-0600","Company 1":145,"Company 2":124},{"date":"2015-11-01T00:00:00-0600","Company 1":165,"Company 2":136}];

整个项目位于使用 jquery 调用的函数中

用户选择一家公司并单击一个按钮，该按钮会触发该公司并提取数据。

此代码片段位于运行的函数的主体中。 (主函数)

var that = this;
this.chart = new AmCharts.AmSerialChart();

以下是在主函数下的显示函数中(mainFunc -> displayFunc)

newdata.reverse()
var companiesLength = companies.length;
var rainbow = new Rainbow();
rainbow.setSpectrum('red', 'blue', 'green', 'yellow');
rainbow.setNumberRange(1, companiesLength); 
rainbow.colourAt(i);
var side = 'left'
var companiesLength = companies.length;
for (var i = 0; i < companiesLength; i++) {
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.gridAlpha = 0;
    valueAxis.axisThickness = 2;
    valueAxis.axisAlpha = 1;
    valueAxis.position = side;
    valueAxis.axisColor = rainbow.colourAt(i); // yields a specific html color
    that.chart.addValueAxis(valueAxis);

    var graph = new AmCharts.AmGraph();
    //graph.type = "serial";
    graph.bullet = "round";
    graph.fillAlphas = 0;
    graph.bulletBorderThickness = 1;
    graph.hideBulletsCount = 30;
    graph.valueField = companies[i]; // yields the name of the company
    graph.title = companies[i];
    graph.lineColor = rainbow.colourAt(i);
    that.chart.addGraph(graph);

    side = (side == 'left' ? 'right' : 'left');
}
that.chart.theme = "chalk";
that.chart.marginRight = 20;
that.chart.marginLeft = 20;
that.chart.autoMargins = false;
that.chart.dataProvider = newdata;
that.chart.categoryField = "date";
that.chart.dataDateFormat = "YYYY-MM-DDTHH:NN:SS-0600";
that.chart.export = {"enabled": true, "position": "bottom-right"};

var categoryAxis = that.chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = "MM";
categoryAxis.minorGridEnabled = true;
categoryAxis.minorGridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";

var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
that.chart.addChartCursor(chartCursor);

legend = new AmCharts.AmLegend();
legend.useGraphSettings = "center";
that.chart.addLegend(legend);
that.chart.addListener("dataUpdated", that.chart.zoomOut);
that.chart.write("chartdiv");
that.chart.zoomOut();

serial.js:346

this.chartCursor && this.chartCursor.update && this.chartCursor.update()

serial.js:980

e.AmSerialChart.base.update.call(this);

amcharts.js:196

c; c--) a[c].update && a[c].update(), b && (a[c].autoResize ? a[c].validateSize && a[c].validateSize() : a[c].premeasure && a[c].premeasure());

我想补充一点，我通过研究 AmCharts 代码来尝试回溯失败的原因，但无法找出原因。

这是它提示的具体代码部分，特别是中间行

var a = this.chart,
    b = a.mouseX - this.x,
    c = a.mouseY - this.y;

Answer 1

所以我要回答我自己的问题。 @martynasma 在帮助揭示代码不起作用的原因方面提供了很大的帮助。

代码错误:

<div class='chartdiv' >&nbsp;</div>

更正的代码:

<div class='chartdiv' id='chartdiv'>&nbsp;</div>