我使用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;
答案 0 :(得分:1)
所以我要回答我自己的问题。 @martynasma在帮助解决代码无效的原因方面提供了很大的帮助。
代码不正确:
<div class='chartdiv' > </div>
更正后的代码:
<div class='chartdiv' id='chartdiv'> </div>