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

我的代码如下： -I使用此函数填充dividendEventData变量中的数据。

＆＃13;

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

＆＃13;

dividendEventData采用这种格式。

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

然后我将dividendEventData添加到我的图表中。

＆＃13;

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

＆＃13;

我的图表看起来像这样。 Chart Image

我的图表工作正常一次并显示说明。但是在下次重新加载后，当我将鼠标悬停在事件图标上时它没有显示描述，它给出了我之前在控制台中提到的错误。我已经删除了我的Cookie并且已经验证了从ajax调用返回的数据总是相同的。我已经关注this stackoverflow thread，但仍然出现同样的错误。

Answer 1

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

AmCharts：Uncaught TypeError：无法读取属性＆＃39; mouseX＆＃39;未定义的

1 个答案: