Highcharts 图表不显示来自 csv 文件的数据

Question

我正在开发一个项目，该项目应该获取实时写入的 csv 数据并将其显示在 html 页面上。我正在使用 Javascript，以及 JQuery、HighCharts 和 PapaParse 库。

这是我的 JSFiddle 和我的代码：https://jsfiddle.net/m5n8xdo9/3/

我知道它看起来不正确，但我不知道如何使它看起来像在我的计算机上的样子。我应该使用不同的托管站点吗？

当我像这样将虚拟数据硬编码到图表中时：

//Altitude
    $(function () {
        $('#altGraph').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: 'Payload Altitude'
            },
            subtitle: {
                text: 'Altitude (m) vs. Time (s)'
            },
            xAxis: {
                categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
            },
            yAxis: {
                title: {
                    text: 'Altitude (m)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'Altitude',
                data: //dummy data here
            }]
        });
    });

一切正常，看起来不错。但是当我使用 papaparse 将 csv 解析为数据数组，并将数据数组传递给相应的图表时，如下所示：

//Altitude
    $(function () {
        $('#altGraph').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: 'Payload Altitude'
            },
            subtitle: {
                text: 'Altitude (m) vs. Time (s)'
            },
            xAxis: {
                categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
            },
            yAxis: {
                title: {
                    text: 'Altitude (m)'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'Altitude',
                data: altitude
            }]
        });
    });

图表显示为空白。

在我的电脑上，当您选择一个文件后，图表会显示出来，但没有数据点。那是我的问题。我在想也许是因为图表是在数据上传之前写入页面的，这就是数据没有显示的原因。我目前不知道如何解决这个问题。

Answer 1

问题是您的 papaParse 将值转换为数组中的字符串，而不是数字。请参阅“dynamicTyping”参数，然后将其设置为 true。