javascript - 如何使用 csv 文件显示分类的 Highcharts 图表

Question

我正在尝试使用 javascript 通过 Highcharts 显示图表。

我已使用 Highcharts modules/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
...

第一列和第二列是点坐标，第三列是类别。我想根据第三行中的类别之一显示点。

我不知道如何显示按 category 列分类的所有 x 和 y 点。

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 类别的数据 - 如果没有，那么您在使用图表时可能会收到错误。为了克服这个问题，您需要循环遍历系列数组并删除所有间隙。