2014-10-20 77 views
1

今天我花了很多时间学习JavaScript和HighCharts。我试图让这个图表显示。我设法让JSON正常工作,但我更愿意让CSV工作,因为我的所有文件都是CSV格式。我经历了很多JavaScript调试器,并看到我的数据正确保存,但数据并未绘制。轴和标题显示。附件是我的代码。预先感谢您的帮助。无论出于何种原因,的jsfiddle不起作用可以随意看看我的意思是在:www.teratuple.com/data/dataVolume.htmlHighcharts在从CSV文件读取时不显示数据但绘制图表

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/stock/highstock.js"></script> 
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script> 
</head> 
<body> 
    <div id = "container" style = "width:100%; height:400px;"></div> 
    <script> 
    var seriesData = []; 
    var chart; 
     $(document).ready(function() { 
      var options = { 
       chart: { 
        renderTo: 'container' 
       }, 
       rangeSelector: { 
        buttons: [{ 
         type: 'hour', 
         count: 1, 
         text: '1h' 
        }, { 
         type: 'day', 
         count: 1, 
         text: '1d' 
        }, { 
         type: 'month', 
         count: 1, 
         text: '1m' 
        }, { 
         type: 'year', 
         count: 1, 
         text: '1y' 
        }, { 
         type: 'all', 
         text: 'All' 
        }], 
       selected: 1 // all 
       }, 
       xAxis: { 
        title: { 
         text: 'Date' 
        } 
       }, 
       yAxis: { 
        title: { 
         text: 'Volume (mm3)' 
        } 
       }, 
       title: { 
        text: 'Volume Differential' 
       }, 
       series: [{ 
        data: [], 
        tooltip: { 
         pointFormat: '{series.name}: <b>{point.y}</b><br/>', 
         valueDecimals: 2 
        } 
       }] 
      }; 
      $.get('www.teratuple.com/data/volumeData.csv', function (data) { 
       var lines = data.split('\n'); 
       $.each(lines, function (lineNo, line) { 
        var items = line.split(','); 
        if (lineNo > 0) { 
         seriesData.push([parseInt(items[0]), parseFloat(items[1])]); 
        }  
       }); 
       options.series.data = seriesData; 
       chart = new Highcharts.StockChart(options); 
      }); 
    }); 
</script> 
</body> 
</html> 

回答

0

series属性意味着是一个数组中,以便通过

options.series[0].data = seriesData; 
+0

设置你的序列数据哈哈非常感谢你!我花了几个小时试图调试这个,它通常是这样的小东西。再次感谢! – PhillipAMann 2014-10-20 05:18:56

+0

它现在的作品,但它并没有画出线!哦,一个问题倒了。向前走到下一个... – PhillipAMann 2014-10-20 06:25:09

+0

对不起,发送垃圾邮件。我想到了。由CSV读入的最后一个元素是两个NaN值。如果我把它们分开,它就完美了。我需要弄清楚为什么CSV没有正确读取。 – PhillipAMann 2014-10-20 06:38:02