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将值转换为数组中的字符串，而不是数字。请参阅＆＃34; dynamicTyping＆＃34;参数然后将其设置为true。

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

1 个答案: