如何使用csv文件顯示分類的高圖表

我試圖顯示Chart與Highcharts，使用javascript。如何使用csv文件顯示分類的高圖表

我讀過csv文件使用Highchartsmodules/data.js和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 
...

第一列和第二列是點座標，第三列是類別。我想根據第三行中的某個類別顯示點。

我不知道如何顯示全部x & y點分爲category列。

來源

2017-02-09 eifersucht

散點只有兩個值 - x和y座標。你能解釋第三個值代表什麼以及它應該如何繪製在圖表上？ – morganfree

x和y是分散點，第三列是分散點的分類，0到6之間的數字。圖表應該以6種不同的顏色顯示，其中分散點是分組的。 – eifersucht

嗯，思考了一下，但...爲什麼不解析高分辨率data.js以外的CSV，然後根據類別值爲您指定一個顏色，例如'{x：theXvalue，y：theYvalue，color： 'somecolor'}'。 – wergeld

您可以將一個類別看作Highcharts中的一個系列。所以，你需要創建一個這樣

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

數組然後你就可以分析您的CSV文件，這將是沒有數據模塊更容易。

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類 - 如果您不這樣做，那麼您可以在使用圖表時收到錯誤。爲了克服這個問題，你需要遍歷串行數組並刪除所有的間隙。

來源

2017-02-09 13:01:24 morganfree

如何使用csv文件顯示分類的高圖表

回答

相關問題