2016-08-11 3 views
2

У меня возникли проблемы с загрузкой некоторых внешних CSV-данных через Ajax в Highcharts. Это особенно шаг прохождения возвращаемые значения в Highcharts, которые я не получаю ...Загрузить данные CSV через Ajax для отображения в Highcharts

Первая функция загружает данные:

function requestData() { 
    $.ajax({ 
     type: "GET", 
     url: "xxx", 
     dataType: "text", 
     success: function(data) 
     { 
      var series_return = processData(data); 

      // like this??? 
      //chart.addSeries({ 
      // name: "NPP", 
      // data: series_return 
      //});      
     } 
    }); 
};   

Данные обрабатываемый здесь, как первая пара из строки содержат только текст:

function processData(allText) 
{ 
    var allTextLines = allText.split(/\r\n|\n/); 
    var lines = []; var n = 0; var series_return = []; 

    for (var i=1; i<allText.length; i++) 
    { 
     if (allTextLines[i]) 
     { 
      if ((allTextLines[i].substring(0,2) == "19") || (allTextLines[i].substring(0,2) == "20")) 
      { 
       n++; 
       series_return[n] = allTextLines[i]; 
      } 
     }     
    } 

    return series_return; 
} 

данные выглядят как это тогда:

[1: "2015/12/01,15.0,-90.0,0.11532234042553188", 2: "2015/11/01,15.0,-90.0,0.10756382978723407"] 

Сценарий Highcharts:

// --------------------------------------------------- 
// ---------------  Highcharts  --------------- 
// --------------------------------------------------- 

$(document).ready(function() 
{ 
    chart = new Highcharts.Chart(
    { 
     chart: 
     { 
      renderTo: 'div_graph', 
      defaultSeriesType: 'spline', 
      marginLeft: 120, 
      marginTop: 100, 
      events: { 
       load: requestData 
      } 
     }, 
     xAxis: 
     { 
      gridLineWidth: 1, 
      gridLineDashStyle: 'Dot', 
      tickWidth: 0, 
      type: 'datetime' 
     }, 
     yAxis: 
     { 
      gridLineWidth: 1, 
      gridLineDashStyle: 'Dot' 
     }, 
     plotOptions: 
     { 
      series: 
      { 
       connectNulls: false, 
       shadow: false, 
       lineWidth: 2, 
       color: '#3f9aff', 
       marker: 
       { 
        enabled: false 
       } 
      } 
     }, 
     series: [{ 
      name: 'NPP', 
      data: [] 
     }] 
    }); 
});  

Итак, что такое правильный способ передачи данных к Highcharts? Я выглядел совсем вокруг и проверял вещи здесь и там, но напрасно.

Спасибо за любые подсказки!

+0

Какие значения должны быть напечатаны как y? Проблема в том, что вы нажимаете строки в массив вместо чисел. Используйте parseFloat(), например series_return [n] = parseFloat (allTextLines [i]); –

+0

Да, это была моя ошибка, стыдно за меня. Не видел дерево в лесу - он должен взять первое и четвертое значение для x и y. – luftikus143

ответ

1

Самый простой способ - изменить функцию processData, чтобы получить массив массивов. Ваш DateString должен быть дату или метку времени, ваш numberstring настоящий поплавок, как это:

data = [ 
    [new Date("2015/12/01,15.0").getTime(), parseFloat(-90.0)], 
    // ... 
]; 

тогда, вы можете передать данные в Highcharts.

Кроме того, кажется, что на высоких картах есть a module to deal with csv data. Вы посмотрели на него?

Смежные вопросы