csvファイルを使用して分類されたハイチャートを表示する方法

Question

javascriptを使用してChartをHighchartsと表示しようとしています。

私はHighchartsmodules/data.jsを使用してcsvファイルを読んだとChartは私のコンテナ内で問題なく表示されます。

mychart = Highcharts.chart('container', { 
    chart: { 
    type: 'scatter', 
    zoomType: 'xy' 
    }, 
    data: { 
    csv: csv, 
    startColumn:0, 
    endColumn:2 
    }, 
    title: { 
    text: 'DATA' 
    }, 
    xAxis: { 
    title: { 
     text: 'X' 
    }, 
    }, 
    yAxis: { 
    title: { 
     text: 'Y' 
    } 
    } 
}); 

基本的CSVはコンマが行ごとに属性と破断線を分離して、3列を有します。

x, y, category 
data1, data2, data3 
data1, data2, data3 
data1, data2, data3 
data1, data2, data3 
data1, data2, data3 
... 

第1列と第2列はポイント座標で、第3列はカテゴリです。私は3番目の行のカテゴリの1つに基づいてポイントを表示したい。

私はcategory列によって分類すべてx & yポイントを表示する方法がわかりません。

Answer 1

カテゴリはハイチャートではシリーズと考えることができます。だから、あなたがあなたのCSVファイルを解析することができますし、それはデータモジュールせずに容易になるだろう。この

series: [{ 
    name: 'Series ' + categoryNumber, 
    data: [] // array with x and y coordinates 
}, { 
    name: '' 
    data: [] 
}] 

のような配列を作成する必要があります。

var rows = csv.split('\n'); 

var series = []; 
rows.forEach(row => { 
    var cells = row.split(',').map(Number); 
    var serie = series[cells[2]]; 

    if (!serie) { 
    serie = series[cells[2]] = {data: []}; 
    } 

    serie.data.push([cells[0], cells[1]]); 
}) 

Highcharts.chart('container', { 
    chart: { 
    type: 'scatter' 
    }, 

    series: series 

}); 

例：http://jsfiddle.net/w7ug4dbw/

あり、あなたのカテゴリにギャップを持っていないグラフの系列のために重要である - ので、あなたは0カテゴリを持っている場合 - 2を、あなたはすべての0,1分のデータを持っている必要があります、2カテゴリ - そうしなければ、チャートを使用中にエラーを受け取ることができます。それを克服するには、系列配列をループしてすべてのギャップを削除する必要があります。