未捕获的类型错误：无法读取未定义的属性“mouseX”答案

【问题标题】：Uncaught TypeError: Cannot read property 'mouseX' of undefined未捕获的类型错误：无法读取未定义的属性“mouseX”
【发布时间】：2015-12-29 17:51:48
【问题描述】：

我正在使用 AmCharts 绘制一段时间内的付款图表。

我的 AmCharts 配置看起来正确。

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

使用 AmCharts 3.18.3.free

完整的控制台输出是

未捕获的类型错误：无法读取未定义 @ amcharts.js:4107 的属性“mouseX”
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 调用的函数中

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

这个 sn-p 在运行的函数的主体中。 (mainFunc)

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

以下是在main函数下的显示函数(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;

【问题讨论】：

我正在以正确的顺序加载序列号和 amcharts。
我注意到您的图表存在一些违规行为：1) 您可以将categoryField 设置为“月”，而数据具有“日期”。 2）数据点是倒序的（降序），它们应该是升序。（如果您无法重新排序源数据，您可以使用newdata.reverse()。如果修复上述两个问题有助于解决问题，请告诉我。
注意到另一个：你有graph.type = "serial"。图表没有这样的错字，这使图表感到困惑。对于默认折线图类型，完全删除这条线。
我有反向 newdata，我已经注释掉了 graph.type，我从 makeChart 类型的样本中得到它：序列。我还将 categoryField 更正为日期（我从示例中复制）。 @martynasma 我还更新了问题以反映这些变化。
你还遇到同样的错误吗？

标签： javascript jquery amcharts

【解决方案1】：

所以我要回答我自己的问题。 @martynasma 非常有助于弄清代码无法正常工作的原因。

不正确的代码：

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

更正的代码：

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

【讨论】：