Question

我今天花了很多时间学习JavaScript和HighCharts。我想让这个图表显示出来。我设法让JSON工作但我更喜欢让CSV工作，因为我的所有文件都是CSV格式。我经历了很多JavaScript调试器，看到我的数据正确保存，但数据没有绘制。轴和标题显示。附上是我的代码。在此先感谢您的帮助。无论出于何种原因，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>

Answer 1

series属性是一个数组，所以通过

设置系列数据

options.series[0].data = seriesData;

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

1 个答案: