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

我的代码如下：
-我使用此功能将数据填充到aspxEventData变量中。

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);
                }
            }
        });

股息事件数据采用这种格式。

[["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]]

然后，我将股息事件数据添加到我的图表中，如下所示。

simpleDataSet.stockEvents = dividendEventData;
                setTimeout(function () {
                    $("#chartcurtain").hide();
                    chart.validateData();
                }, 1000);

我的图表如下所示。
Chart Image

我的图表可以正常运行一次并显示说明。但是在下一次重新加载后，当我将鼠标悬停在事件图标上时，它不会显示说明，并且会出现我在控制台中前面提到的错误。我已经删除了Cookie，并验证了从ajax调用返回的数据始终是相同的。我遵循了this stackoverflow thread，但仍然是相同的错误。

最佳答案

首次初始化图表时，它期望data / config为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