Highcharts在Safari与Chrome中的格式不同

时间:2016-02-18 16:38:40

标签: javascript google-chrome highcharts safari

我使用以下代码生成我想要的Safari中所需的Highchart格式。然而,当我在谷歌浏览器中尝试它时,我得到错误“未捕获的TypeError: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
            }
        }
    }
  }); 
});

1 个答案:

答案 0 :(得分:1)

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

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

一种方法是将xAxis的类型设置为'category',因为我猜你正在使用它。

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

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