AmCharts: Uncaught TypeError: Невозможно прочитать свойство 'mouseX' из неопределенного

1

Я использую 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/... но все тот же ошибка.

Теги:
charts
amcharts
uncaught-typeerror

1 ответ

1
Лучший ответ

Когда вы сначала инициализируете график, он ожидает, что данные /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="//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

Поделиться
  • 0
    Я попробовал этот код, но все еще сталкивался с той же ошибкой.
  • 0
    Пожалуйста, проверьте детали ошибки и код в этом> изображении
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню