График высоких диаграмм, не отображающий данные из файла 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.