根据弹出式属性解析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

回答

相关问题