Анализ CSV на основе свойств всплывающих окон

Question

Я создаю карту, используя листовки, чтобы показывать температуру потока в разных местах. В настоящее время у меня есть диаграмма линий Highchart, созданная в каждом всплывающем окне, однако я не могу найти способ сделать данные в диаграмме специфичными для всплывающего окна. Данные на карте находятся в geoJSON с координатами SiteID, x и y. Всплывающее окно в настоящее время связывает функцию .properties.Site. Данные подачи диаграммы в формате CSV для обеспечения легкого обновления и организована как:

даты, SiteA, SITEB
ноября-1-2016, 6, 8
ноября-2-2016, 7 9

Нужно ли повторно анализировать данные каждый раз, когда всплывающее окно открыто для того, чтобы анализировать только соответствующий сайт или есть опция в Highcharts, которая позволила бы мне разобрать все данные, но только отобразить соответствующий сайт?

Спасибо!

Answer 1

Ваш формат данных не может использоваться с модулем данных Highchart, который может загружать CSV. Проблема в том, что ваша дата не указана в типе номера, поэтому вам нужно проанализировать ее с помощью функции Date.parse.

Существует два способа анализа данных: вы можете получить свой CSV и преобразовать его в желаемый CSV, который может быть прочитан модулем данных Highchart. Другой вариант - проанализировать ваши данные и обновить серию с помощью series.update.

Вы также можете изменить свои данные, прежде чем он применяется к диаграмме с помощью: http://api.highcharts.com/highcharts/data.parsed

Живой пример разбора CSV и с помощью модуля данных: https://jsfiddle.net/45khuo3h/

// Your input csv file 
var csv = 'date, siteA, siteB' + '\n' + 
    'nov-1-2016, 6, 8' + '\n' + 
    'nov-2-2016, 7, 9'; 

// Modify your csv 
var modifyCSV = function(csv) { 
    return csv.split('\n') 
    .map(line => line.split(',') 
     .map(el => { 
     if (el.split('-').length === 3) { 
      el = Date.parse(el); 
     } 
     return el; 
     }) 
     .reduce((a, b) => a + ',' + b) 
    ) 
    .reduce((a, b) => a + '\n' + b, ''); 
} 

// Options 
var options = { 
    chart: { 
    renderTo: 'container' 
    }, 
    xAxis: { 
    type: 'datetime' 
    }, 
    data: { 
    csv: modifyCSV(csv), 
    parsed: function() { 
     console.log(this); 
     // Modify your data here 
     this.columns[0][2] += 100000000; 
    } 
    } 
} 

// Render chart 
var chart = Highcharts.chart(options);