Uncaught TypeError: Cannot read property 'mouseX' of undefined

问题

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

My configuration of AmCharts looks correct.

Also please note I am not a expert in Javascript.

Using AmCharts 3.18.3.free

The full console output is

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

I'm also using 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}];

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.

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

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

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

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

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;

回答1:

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

Incorrect code:

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

Corrected code:

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

来源：https://stackoverflow.com/questions/34516291/uncaught-typeerror-cannot-read-property-mousex-of-undefined

标签

javascript

jquery

amcharts