Question

我正在使用AmCharts在我的网站上显示图表。

它于8月29日在Safari中运行。从那以后，除了图表下面的一些文字之外，没有改变任何东西。（查看我的git历史记录）。

但不知何故，当我今天检查时，图表被打破了。

我收到以下错误：

TypeError：undefined不是对象（评估'b [0] .time'）

来自Serial.js第24-25行

Serial.js是我正在使用的AmCharts的线图库。我没有更新它或改变其中的任何内容。

我不知道为什么我开始收到此错误。它似乎与给予图表组件的数据有关。

当我注释掉AmCharts反应组件时，它运行正常。

除了错误之外，还进行了一次AJAX调用，从API获取图表数据也失败了，不知何故运行相同的Serial.js代码。

我试图强制它不要将图表放在页面上，直到检索完所有数据。

if (chartData[0]) {
      if (chartData[0].market) {
        console.log(chartData);
        chart = (
          <div id="result-chart" className={this.state.chartClass}>
            {React.createElement(AmCharts.React, config)}
          </div>
        )
      }
    }

以下AJAX调用正在运行时出现错误：

getAnnualData() {
    $.ajax(`https://www.quandl.com/api/v1/datasets/YAHOO/INDEX_GSPC.json?trim_start=1970-01-01&collapse=monthly&column=4&auth_token=XXXXX`)
    .then((r) => {
      let fixedData = r.data.map((point) => {
        return point[1].toFixed(0)
      })
      fixedData = fixedData.reverse()

      let percent = null;
      for(var e = 0; e < fixedData.length; e++) {
                if(e < 1) {
                    percent = (25000 * 100) / fixedData[0] / 100;
                }
                fixedData[e] = Math.floor(percent * fixedData[e]);
            }

      this.set('annualData', fixedData)
    })
    .fail((e) => {
      console.error('Failed fetching QUANDL DATA', e)
    })
  },

失败'获取QUANDL DATA失败'正在运行。这里传递的错误与首次提到的相同。

查看堆栈跟踪，错误在以下事件中出现：

onDataUpdated — serial.js:25:412

为了甚至运行该代码，我假设数据必须在那里。否则它永远不应该运行任何AmCharts代码。

然而，最奇怪的是，这只发生在Safari上...它适用于Chrome，Edge＆amp;火狐...

调试此操作也证明非常困难，因为我的控制台日志都没有显示在Safari的此页面上。

然而它肯定会以某种方式连接到Ajax调用。我在另一页上有其他AmCharts图表。 ALl那些使用AJAX调用数据的人在Safari中被破坏了。但是，不使用该数据集的折线图工作得很好......（但它们在其他浏览器中都可以正常工作）

我还检查了我从Quandl使用的实际数据。并且数据看起来很好。

我尝试手动将chartData上的市场密钥设置为空。并且将图表放在页面上的代码永远不会运行，并且没有错误。然后我也尝试将其设置为固定数字。每次。代码运行，我仍然得到错误。所以它绝对不是由于“糟糕的”API数据。

我正在使用Babel来编译ES6代码。

以下是用于生成chartData的代码：

let basicData = store.plans.get('basic').get('annualData')
    let premiumData = store.plans.get('premium').get('annualData')
    let businessData = store.plans.get('business').get('annualData')
    // let fundData = store.plans.get('fund').get('annualData')


    let marketData = store.market.data.get('annualData')

    let fixedData = basicData.map((point, i) => {

      let premiumBalance = 0
      let businessBalance = 0
      // let fundBalance = 0
      let marketBalance = 0

      if (premiumData[i]) { premiumBalance = premiumData[i].balance }
      if (businessData[i]) { businessBalance = businessData[i].balance }
      // if (fundData[i]) { fundBalance = fundData[i].balance }
      if (marketData[i]) { marketBalance = marketData[i] }

      return {
        basic: point.balance,
        premium: premiumBalance,
        business: businessBalance,
        // fund: fundBalance,
        market: marketBalance,

        basicBalloon: formatPrice(point.balance),
        premiumBalloon: formatPrice(premiumBalance),
        businessBalloon: formatPrice(businessBalance),
        // fundBalloon: formatPrice(fundBalance),
        marketBalloon: formatPrice(marketBalance),

        date: `${point.date.year}-${point.date.month}-${point.date.day}`
      }
    })

    function formatPrice(value) {
        while(/(\d+)(\d{3})/.test(value.toString())) {
            value = value.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
        }
        let price = '$' + value;
        return price;
    }

    let chartData = []
    if (this.state.animate && this.state.fetched) {
      chartData = fixedData;
    }

如果它是相关的，这里是图表的配置：

let config = {
  type: "serial",
  theme: "dark",
  addClassNames: true,


  dataProvider: chartData,

  balloon: {
    color: '#49494A',
    fillAlpha: 1,
    borderColor: '#FFFFFF',
    borderThickness: 0,
  },

  graphs: [
    {
      id: "market",
      lineColor: "#49494A",

      bullet: "square",
      bulletBorderAlpha: 1,
      bulletColor: "#FFFFFF",
      bulletSize: 5,
      hideBulletsCount: 10,
      lineThickness: 2,
      useLineColorForBulletBorder: true,
      valueField: "market",
      "balloonText": "<div class=\"chart-balloon\"><span class=\"plan-name market-name\">S&P 500</span><span class=\"balloon-value\">[[marketBalloon]]</span></div>",
    },
    {
    id: "basic",
    lineColor: "#FFFFFF",

    bullet: "square",
    bulletBorderAlpha: 1,
    bulletColor: "#FFFFFF",
    bulletSize: 5,
    hideBulletsCount: 10,
    lineThickness: 2,
    useLineColorForBulletBorder: true,
    valueField: "basic",
    balloonText: "<div class=\"chart-balloon\"><span class=\"plan-name\">Basic</span><span class=\"balloon-value\">[[basicBalloon]]</span></div>"
  },
  {
    id: "premium",
    lineColor: "#FFFFFF",

    bullet: "square",
    bulletBorderAlpha: 1,
    bulletColor: "#FFFFFF",
    bulletSize: 5,
    hideBulletsCount: 10,
    lineThickness: 2,
    useLineColorForBulletBorder: true,
    valueField: "premium",
    balloonText: "<div class=\"chart-balloon\"><span class=\"plan-name\">Premium</span><span class=\"balloon-value\">[[premiumBalloon]]</span></div>"
  },
  {
    id: "business",
    lineColor: "#FFFFFF",

    bullet: "square",
    bulletBorderAlpha: 1,
    bulletColor: "#FFFFFF",
    bulletSize: 5,
    hideBulletsCount: 10,
    lineThickness: 2,
    useLineColorForBulletBorder: true,
    valueField: "business",
    "balloonText": "<div class=\"chart-balloon\"><span class=\"plan-name\">Business</span><span class=\"balloon-value\">[[businessBalloon]]</span></div>",
  }
],
  valueAxes: [{
    logarithmic: true,
    unit: '$',
    unitPosition: 'left',
    gridAlpha: 0.15,
    minorGridEnabled: true,
    dashLength: 0,
    inside: true,
        }],

  chartCursor: {
        valueLineEnabled: true,
        valueLineAlpha: 0.5,
        fullWidth: true,
        cursorAlpha: 0.5
    },

  categoryField: "date",
  categoryAxis: {
    parseDates: true,
    equalSpacing: true,
  },

};

if (store.session.browserType() === 'Safari') {
  config.dataDateFormat = "YYYY-M-D",
  config.categoryAxis = {
    equalSpacing: true,
  }
}

是的，我已经尝试取出Safari专用代码。

非常感谢任何帮助。带有图形组件的文件的Github历史记录：https://github.com/MarkLyck/Formula-Stocks/commits/master/app/scripts/components/home/TheResults.js

undefined不是Safari中的对象（评估'b.length'）

0 个答案: