根據彈出式屬性解析CSV

我使用傳單創建地圖以顯示不同位置的流溫度。我目前在每個彈出窗口中創建了一個Highchart折線圖，但是，我似乎無法找到一種方法來使圖表中的數據特定於彈出窗口。地圖中的數據位於帶有SiteID，x座標和y座標的geoJSON中。彈出窗口當前綁定了feature.properties.Site。數據供給圖表是在CSV以允許容易更新和組織等：根據彈出式屬性解析CSV

日期，站點A，網站B
NOV-1-2016，6,8
NOV-2-2016，7 9

每次打開彈出窗口時，是否需要重新解析數據才能解析相關網站，或者在Highcharts中是否有選項可以解析所有數據，但只繪製相關網站？

謝謝！

來源

2016-11-04 DailyCake

您的數據格式不能與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);

來源

2016-11-09 14:51:27 stpoa

根據彈出式屬性解析CSV

回答

相關問題