Question

我正在尝试使用.csv文件中的数据创建高保真line图表。但我的网页只是显示x和y轴的标题，但没有数据。代码如下：

$(document).ready(function() {
    var c = [];
    var d = [];

$.get('data.csv', function(data) {                  
    alert("data in the file: " + data);
    var lines = data.split('\n');   
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');
        c.push(items[0]);       
        d.push(parseInt(items[1])); 
    });
});

var options = {
        chart: {
            renderTo: 'chart',
            defaultSeriesType: 'line'
        },
        title: {
            text: 'Weight Monitor'
        },
        xAxis: {
            title: {
                text: 'Date Measured'
            },
            categories: c
        },
        yAxis: {
            title: {
                text: 'Weight (in Lbs)'
            }
        },
        series: [{
            data: d
        }]
};
var chart = new Highcharts.Chart(options);
    });

我试图在屏幕上打印从文件中读取的数据，只是为了检查文件是否正确读取并且我得到了正确的数据，但我的图表仍未显示任何内容。

以下是我的csv文件中的数据：

    2011-08-01 00:00:00,155
    2011-08-02 00:00:00,156
    2011-08-03 00:00:00,157
    2011-08-03 00:00:00,160

其中，左侧值是以x轴显示的日期，右侧值是图形的读取点。

任何帮助都会感激不尽。

Answer 1

您的代码非常完美。

<script type="text/javascript">

    $(document).ready(function() {

        var c = [];
        var d = [];

        $.get('data.csv', function(data) {
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                c.push(items[0]);
                d.push(parseInt(items[1]));
            });
        });

        var options = {
                chart: {
                    renderTo: 'chart',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'reading'
                },
                xAxis: {
                    title: {
                        text: 'Date Measurement'
                    },
                    categories: c
                },
                yAxis: {
                    title: {
                        text: 'reading'
                    }
                },
                series: [{
                    data: d
                }]
        };

        var chart = new Highcharts.Chart(options);

    });


</script>

复制整个代码并将其作为.html文件保存在目录中，并在同一目录中创建data.csv文件，并确保没有空行，没有不需要的空格，也没有换行符结束。

然后打开.html文件，图表应显示正确的数据。

Answer 2

在$ .get中添加图表。注意我们无法在Ajax回调之外创建图表，因为我们必须等待从服务器返回数据。请参阅this。

$.get('data.csv', function(data) {

        var lines = data.split('\n');

        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            c.push(items[0]);
            d.push(parseInt(items[1]));
        });
        var chart = new Highcharts.Chart(options);

    },'Text');

还明确提到数据返回类型为“文字”，这可能是一段时间的问题。

Answer 3

您必须正确阅读文档。见http://www.highcharts.com/documentation/how-to-use#preprocessing

他们已经有了csv http://highcharts.com/studies/data-from-csv.htm的演示。

请仔细阅读文档并熟悉自己！

问题显示来自csv文件的数据用于highcharts

3 个答案: