2

我正在尝试使用 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> 

任何帮助,将不胜感激。

4

2 回答 2

2

看这部分:

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');

看到这个 jsFiddle

于 2012-06-26T09:53:46.667 回答
1

你应该:

  1. 标准化您的 csv 结果
  2. 将正确的选项放到您的高位图上

这个例子

于 2012-06-26T10:09:25.460 回答