AmCharts：未捕获的类型错误：无法读取未定义的属性“mouseX”
我正在使用 AmCharts 处理股票相关事件。我的控制台窗口出现以下奇怪的错误。
Uncaught TypeError: Cannot read property 'mouseX' of undefined
at b.followCursor (amcharts.js:271)
at b.showBalloonReal (amcharts.js:130)
at amcharts.js:130
我的代码如下： -我使用此函数在 dividedEventData 变量中填充数据。
function getCompanyEventChartData() {
var jqhx = $.ajax({
type: "GET",
data: { 'marketID': '@Model.MarketID', 'companyID': '@Model.CompanyID' },
url: "@Url.CompanyChartEvent()"
})
.done(function (data) {
for (var i = 0; i < data.length; i++) {
if (data[i][1] == "31") {
var e0 = {
date: new Date(data[i][0]),
type: "sign",
backgroundColor: "#85CDE6",
graph: closeGraph,
text: "D",
description: "temporary",
url: "https://www.google.com/",
urlTarget: "_blank"
};
dividendEventData.push(e0);
}
}
});distributedEventData 的格式是这样的。
[["Sunday, 18, Dec, 2016",31],["Thursday, 24, Dec, 2015",31],["Thursday, 11, Dec, 2014",31],["Thursday, 19, Dec, 2013",31],["Saturday, 22, Dec, 2012",31],["Saturday, 24, Dec, 2011",31],["Tuesday, 22, Feb, 2011",31],["Tuesday, 19, Jan, 2010",31],["Saturday, 29, Nov, 2008",31],["Wednesday, 20, Feb, 2008",31],["Tuesday, 27, Feb, 2007",31],["Monday, 28, Mar, 2005",31]]
然后我像这样将 dividedEventData 添加到我的图表中。
simpleDataSet.stockEvents = dividendEventData;
setTimeout(function () {
$("#chartcurtain").hide();
chart.validateData();
}, 1000);我的图表如下所示。 图表图像
我的图表一次运行正常并显示描述。但在下次重新加载后，当我将鼠标悬停在事件图标上时，它不会显示描述，并且它会在控制台中显示我之前提到的错误。我删除了我的 cookies，并验证了 ajax 调用返回的数据始终相同。我已关注 此 stackoverflow 线程 ，但仍然出现相同的错误。
首次初始化图表时，它会将数据/配置作为 JavaScript 对象和数组。然后，它会继续将简单的 JS 对象转换为适当类的实例。
对于股票事件，它会将
stockEvents
对象数组转换为
StockEvent
实例数组。
这就是您的图表首次运行的原因。
现在，当您向已初始化的图表添加事件时，您基本上是在向
stockEvents
数组添加一个基本对象。现在，当您这样做时，您最终会得到一个混合了
StockEvent
实例和基本对象的数组。
这次对象不会转换为
StockEvent
实例，因此出现异常。
您需要做的是将新事件实例化为
StockEvent
，然后将该实例推送到
stockEvents
。
像这样：
var e0 = new AmCharts.StockEvent();
e0.date = new Date(data[i][0]);
e0.type = "sign";
e0.backgroundColor = "#85CDE6";
e0.graph = closeGraph;
e0.text = "D";
e0.description = "temporary";
e0.url = "https://www.google.com/";
e0.urlTarget = "_blank";
dividendEventData.push(e0);
这应该可以解决问题。
这是一个有效示例：
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"minPeriod": "mm"
},
"dataSets": [
{
"fieldMappings": [
{
"fromField": "value",
"toField": "value"
}
],
"dataProvider": generateChartData(),
"categoryField": "date"
}
],
"panels": [
{
"stockGraphs": [
{
"valueField": "value",
"type": "smoothedLine"
}
]
}
],
"chartCursorSettings": {
"valueBalloonsEnabled": true
}
});
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 1000);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 1000; i++) {
var newDate = new Date(firstDate);
newDate.setHours(0, i, 0, 0);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value: a
});
}
return chartData;
}
function test() {
var dividendEventData = [];
for (var i = 0; i < 5; i++) {
var r = Math.floor(Math.random() * 1000);
var e0 = new AmCharts.StockEvent();
e0.date = new Date(chart.dataSets[0].dataProvider[r].date);
e0.type = "sign";
e0.backgroundColor = "#85CDE6";
e0.graph = chart.panels[0].stockGraphs[0];
e0.text = "D";
e0.description = "temporary";
e0.url = "https://www.google.com/";
e0.urlTarget = "_blank";
dividendEventData.push(e0);
}
chart.dataSets[0].stockEvents = dividendEventData;
chart.validateData();
}#chartdiv {
width: 100%;
height: 200px;
}<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
<input type="button" value="add event" onclick="test();" />这是相同的 CodePen 版本： https://codepen.io/team/amcharts/pen/c37ef299206c6ab5a09c15b0f665e6f0?editors=0010