2

csvファイルからハイチャートを使用してグラフを作成しようとしています。
以下は私の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軸のデータで、もう1つの列は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 に答える