Question

我正在尝试使用csv文件中的highcharts制作图表以下是我的csv文件的数据：

0   1.03645399076138    18.680054645644 26.8678147836078
1   2.44625498591384    18.680054645644 26.8678147836078
2   5.45509322517529    18.680054645644 26.8678147836078
3   2.36362640018202    18.680054645644 26.8678147836078
4   2.28307829582599    18.680054645644 26.8678147836078
5   3.41138672777039    18.680054645644 26.8678147836078
...

第一列是x轴的数据，另一列是y轴的数据。现在这是我发现的代码，我正在努力适应。

<script type="text/javascript">
  jQuery(document).ready(function() {


    var options = {
      chart: {
        renderTo: 'container2',
        defaultSeriesType: 'column'
      },
      title: {
        text: 'Ewarespar Residuals'
      },
      xAxis: {
        categories: []
      },
      yAxis: {
        title: {
          text: 'Units'
        }
      },
      series: []
    };

    /*
         Load the data from the CSV file. This is the contents of the file:

                Apples,Pears,Oranges,Bananas,Plums
                John,8,4,6,5
                Jane,3,4,2,3
                Joe,86,76,79,77
                Janet,3,16,13,15

     */
    jQuery.get('/qark/1/graph2.csv', function(data) {
      // Split the lines
      var lines = data.split('\n');
      jQuery.each(lines, function(lineNo, line) {
        var items = line;

        // header line containes categories
        if (lineNo == 0) {
          jQuery.each(items, function(itemNo, item) {
            if (itemNo > 0) options.xAxis.categories.push(item);
          });
        }

        // the rest of the lines contain data with their name in the first position
        else {
          var series = {
            data: []
          };
          jQuery.each(items, function(itemNo, item) {
            if (itemNo == 0) {
              series.name = item;
            } else {
              series.data.push(parseFloat(item));
            }
          });

          options.series.push(series);

        }

      });

      var chart = new Highcharts.Chart(options);
    });


  });
</script>

任何帮助都将不胜感激。

Answer 1

看看这部分：

jQuery.each(lines, function(lineNo, line) {
    var items = line;

    // header line containes categories
    if (lineNo == 0) {
      jQuery.each(items, function(itemNo, item) {

你看错了吗？你正在迭代一个字符串！你需要拆分每一行。如果行中的值由制表符分隔，则可以执行以下操作：

var items = line.split('\t');

请参阅this jsFiddle。

Answer 2

你应该：

规范化您的csv结果
将正确的选项放入您的问题解答

请参阅this example

如何使用csv文件中的highcharts创建图形？

2 个答案: