Highcharts在Safari和Chrome中的格式不同

Highcharts formats differently in Safari vs Chrome

本文关键字:格式 Chrome Safari Highcharts      更新时间:2023-09-26

我正在使用以下代码,它生成了我在 Safari 中想要的所需的 Highchart 格式。但是,当我在谷歌浏览器中尝试时,即使我没有更改任何内容,我也会收到错误"未捕获的类型错误:this.value.slice不是一个函数"。

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

如果value不是字符串,则 Chrome 将找不到.slice() - 抛出类型错误。

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

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

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

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