未捕获的TypeError:无法读取未定义的属性'mouseX' [英] Uncaught TypeError: Cannot read property 'mouseX' of undefined

问题描述

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

I'm using AmCharts to make a graph of payments made over time.

我的AmCharts配置看起来正确.

My configuration of AmCharts looks correct.

还请注意，我不是Java语言方面的专家.

Also please note I am not a expert in Javascript.

使用AmCharts 3.18.3.free

Using AmCharts 3.18.3.free

完整的控制台输出是

未捕获的TypeError:无法读取未定义的属性'mouseX'@ 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

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调用的函数中

This entire item sits in a function that is called with jquery

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

User selects a company and clicks a button, which fires off this and pulls data.

此代码段位于要运行的函数的主体中. (mainFunc)

This snippet is in the main body of the function that gets run. (mainFunc)

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

以下是显示功能在主功能(mainFunc-> displayFunc)下

The following is in the display function under the main function (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

serial.js:346

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

serial.js:980

serial.js:980

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

amcharts.js:196

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代码以尝试追溯为什么它失败了并且找不到原因.

I'd like to add that I worked on this from looking into AmCharts code to try to backtrace why it was failing and couldn't find out why.

这是它抱怨的特定代码部分，尤其是中间行

Here is the specific code section that it's complaining about, the middle line in particular

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

推荐答案

所以我要回答我自己的问题. @martynasma在帮助弄清为什么代码无法正常工作方面提供了很大的帮助.

So I'm going to answer my own question. @martynasma was a great help in helping to unconver why the code was not working.

错误代码:

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

更正的代码:

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

这篇关于未捕获的TypeError:无法读取未定义的属性'mouseX'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！