javascript - Highcharts 在 Safari 和 Chrome 中的格式不同

Question

我使用以下代码生成我想要在 Safari 中所需的 Highchart 格式。然而，当我在 Google Chrome 中尝试它时，即使我没有更改任何内容，我也会收到错误“Uncaught TypeError: this.value.slice is not a function”。

在 xAxis 部分中，我将从 csv 文件读取的字符串从“02/15/2016 10:31:46”等更改为“10:31:46”。

但是，当我删除下面代码中的整个 xAxis 部分并在 Chrome 中运行它时，它会自动将 xAxis 格式设置为“10:31”之类的内容。就我个人而言，我更喜欢在 Safari 中使用以下代码时生成的格式。我只是想知道有谁知道为什么会发生这种情况，或者 Chrome 中的什么改变了下面代码的工作方式。

$.get(data, function(csv) {
  $('#container').highcharts({
    chart: {
      zoomType: 'x',
      type: 'column',
    },
    data: {
      csv: csv,
      lineDelimiter: "\n",
    },
    title: {
          text: 'CSV file data'
      },
    yAxis: {
        title: {
            text: 'Bytes'
        }
    },
    xAxis: {
      labels: {
        //Only show the time (not date and time)
        formatter: function() {
              return this.value.slice(10,-4);
        }
      } 
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    }
  }); 
});

Answer 1

如果 value 不是字符串，则 Chrome 将找不到 .slice() - 会引发 TypeError。

这是因为 Chrome 成功将您的日期格式解析为 JavaScritp 时间戳。

一种方法是将 xAxis 的类型设置为 'category'，因为我猜这就是您正在使用的。

示例:http://jsfiddle.net/vs6qpobq/

另一种方法是通过在 parseDate 中添加配对函数来确保在 Safari 中正确解析日期。并从时间戳中获取信息。