Я использую 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
Мой код выглядит следующим образом: -I использует эту функцию для заполнения данных в переменной divendEventData.
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);
}
}
});
DivendEventData находится в этом формате.
[["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]]
Затем я добавляю divendEventData к моей диаграмме, как это.
simpleDataSet.stockEvents = dividendEventData;
setTimeout(function () {
$("#chartcurtain").hide();
chart.validateData();
}, 1000);
Моя диаграмма выглядит так. Изображение диаграммы
Моя диаграмма отлично работает один раз и отображает описание. Но после следующей перезагрузки он не показывает описание, когда я наводил указатель мыши на значок событий, и он дает ошибку, о которой я упоминал ранее в консоли. Я удалил свои файлы cookie и подтвердил, что данные, возвращаемые с помощью ajax-вызова, одинаковы. Я следил за qaru.site/questions/11225405/... но все тот же ошибка.
Когда вы сначала инициализируете график, он ожидает, что данные /config будут как объекты и массивы JavaScript. Затем он переходит к преобразованию простых объектов JS в экземпляры соответствующих классов.
В случае stockEvents
событий он преобразует массив объектов StockEvent
в массив экземпляров 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="/amcharts.js"></script>
<script src="/serial.js"></script>
<script src="/light.js"></script>
<script src="/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