简体   繁体   English

从CSV文件读取时,Highcharts不显示数据,而是绘制图表

[英]Highcharts not displaying data but drawing chart when reading from CSV file

I have spent many hours learning JavaScript and HighCharts today. 今天,我已经花了很多时间学习JavaScript和HighCharts。 I am trying to get this chart to display. 我正在尝试显示此图表。 I managed to get the JSON to work but I would prefer to get the CSV to work as all of my files are in CSV. 我设法使JSON工作,但是我更希望使CSV工作,因为我的所有文件都为CSV文件。 I have gone through the JavaScript debugger a lot and see that my data is saving correctly but yet the data does not draw. 我经过了很多JavaScript调试器,发现我的数据可以正确保存,但是仍无法绘制数据。 The axis and title do display. 会显示轴和标题。 Attached is my code. 附件是我的代码。 Thanks in advance for help. 在此先感谢您的帮助。 For whatever reason, the JSFiddle doesn't work so feel free to look at what I mean at: www.teratuple.com/data/dataVolume.html 出于某种原因,JSFiddle无法正常工作,因此请随意查看我的意思: www.teratuple.com/data/dataVolume.html

<!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>

series属性是一个数组,因此可以通过

options.series[0].data = seriesData;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM