ポップアップのプロパティに基づいてCSVを解析する

Question

リーフレットを使用してマップを作成し、異なる場所のストリームの温度を表示します。私は現在、すべてのポップアップでハイチャートの折れ線グラフを作成していますが、グラフのポップアップに固有のデータを作成する方法を見つけることはできません。マップ内のデータは、SiteID、x座標、およびy座標を持つgeoJSONにあります。ポップアップは現在、feature.properties.Siteをバインドします。チャートを供給するデータ簡単更新を可能にするために、CSVにあり、同様に構成されています

日付、SITEA、SiteBの
11月-1から2016、6、8
11月 - 2から2016、7 9

関連するサイトのみを解析するためにポップアップが開かれるたびにデータを再解析する必要がありますか、またはハイチャートですべてのデータを解析できますが関連するサイトのみをプロットできるオプションがありますか？

ありがとうございます！

Answer 1

データフォーマットは、CSVをロードできるHighchartのデータモジュールでは使用できません。問題は、日付が数値型ではないことです。そのため、Date.parse関数で解析する必要があります。

データを解析する2つの方法があります。あなたのCSVを入手し、それをHighchartのデータモジュールが読み取れるCSVに変換できます。もう一つの選択肢は、あなたのデータを解析し、あなたのシリーズを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);