javascript - AmCharts : Uncaught TypeError: Cannot read property 'mouseX' of undefined

Question

我正在使用 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

我的代码如下: -我使用这个函数来填充dividendEventData变量中的数据。

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但仍然是同样的错误。

Answer 1

当您第一次初始化图表时，它需要数据/配置作为 JavaScript 对象和数组。然后它继续将简单的 JS 对象转换为适当类的实例。

对于 Stock Events，它将对象的 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