简单的 Highcharts 图表在 Firefox 中不起作用答案

【问题标题】：Simple Highcharts chart not working in Firefox简单的 Highcharts 图表在 Firefox 中不起作用
【发布时间】：2017-11-15 13:39:01
【问题描述】：

我在使用 highcharts 和 Firefox 时遇到了一个奇怪的问题。出于某种原因，此代码适用于 Chrome，但不适用于 Firefox：

var options = {
chart: {
    renderTo: 'visits',
    backgroundColor:null,
    type: 'line'
},
exporting: { enabled: false },
title: {
    text: 'Visits'
},

xAxis: {
    categories: [],
    tickInterval: 7,
    labels: {
        style: {
            fontSize:'8px'
        }}
},
yAxis: {
    labels: {
            enabled: false
    },
    title: {
        text: null
    }
},
tooltip: {
    pointFormat: '{point.y:.0f} Visits'
},
legend: {
    enabled: false
},
series: [{
    name: [],
    data: []
}]};

$.get('downloads/myfile.csv', function(data) { // 分割线

var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
    var items = line.split(',');
    if (lineNo !== 0) {
        options.series[0].data.push({
            name: items[0],
            y: parseFloat(items[1])
        });

        options.xAxis.categories.push(x);
    }
});
var chart = new Highcharts.Chart(options); });

我的 CSV 文件有以下数据：

2017-09-01,65
2017-09-02,36
2017-09-03,36
2017-09-04,91
2017-09-05,75
2017-09-06,120

既然 items[1] 是数字，为什么在 Firefox 中无法显示？如果我用普通数字替换 items[1]，比如“1”，我会得到一条平线，这意味着由于某种原因 parseFloat 失败。我在控制台中没有收到任何错误或警告。

我该如何处理？

【问题讨论】：

当您尝试解析数字 1 时，您是如何尝试的？像这样：parseFloat(1) 或像这样：parseFloat("1") ?
我这样做：parseFloat(items[1]) items[1] 应该是 CSV 中每一行的第二列。我不明白为什么它适用于 Chrome 而不是 Firefox。将其替换为： y: parseFloat(items[1]) 与 y: 1 结果为一条直线。

标签： javascript csv firefox highcharts

【解决方案1】：

我找到了为什么它在 Firefox 中不起作用。 CSV 文件的编码是带有 BOM 的 UTF-8！由于某种原因 Firefox 无法解析它。我已将 CSV 保存为 ANSI，它按预期工作。我想我可以通过使用 AJAX 读取文件来解决这个问题。

【讨论】：