如何使用csv文件

Question

我正在尝试使用Chart显示Highcharts javascript。

我使用csv Highcharts阅读了modules/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＆amp;按y列分类的category个点。

Answer 1

您可以将类别视为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类别的数据 - 如果你不这样做，然后您可以在使用图表时收到错误。要克服这个问题，您需要循环遍历系列数组并删除所有间隙。