未捕获的TypeError:无法读取属性' mouseX'未定义的

时间:2015-12-29 17:51:49

标签: javascript jquery amcharts

我使用AmCharts制作了一段时间内付款的图表。

我对AmCharts的配置看起来是正确的。

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

使用AmCharts 3.18.3.free

完整的控制台输出是

  

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

调用的函数中

用户选择一家公司并点击一个按钮,该按钮会激活该公司并提取数据。

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

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;

1 个答案:

答案 0 :(得分:1)

所以我要回答我自己的问题。 @martynasma在帮助解决代码无效的原因方面提供了很大的帮助。

代码不正确:

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

更正后的代码:

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