-1

我不知道为什么它不起作用。我是这个领域的新手。我也保存了一个文件 data.csv,但它什么也没显示。

 <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Graph</title>

 <script type="text/javascript"src="http://ajax.googleapis.com
 /ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

$(document).ready(function(){


var options = {
chart: {
    renderTo: 'container',
    defaultSeriesType: 'column'
},
title: {
    text: 'Fruit Consumption'
},
xAxis: {
    categories: []
},
yAxis: {
    title: {
        text: 'Units'
    }
},
series: []
};

$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');

// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
    var items = line.split(',');

    // header line containes categories
    if (lineNo === 0) {
        $.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: []
        };
        $.each(items, function(itemNo, item) {
            if (itemNo === 0) {
                series.name = item;
            } else {
                series.data.push(parseFloat(item));
            }
        });

        options.series.push(series);

    }

});

// Create the chart
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

2.我的 data.csv 文件如下所示:

            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

我想生成交互式图表,这些图表从另一个受密码保护的网站(我知道密码)上的 Excel 文件中获取数据,但这些文件会随着时间而更新。

4

1 回答 1

4

获取请求是异步的,您将其视为同步的。

在返回 Ajax 调用之前,该行var chart = new Highcharts.Chart(options);正在运行。

您需要在加载数据后初始化图表。[回调中的AKA]

同样在您上面的代码中,我没有看到用于 highcharts 的 JavaScript 文件。这也将是一个大问题。

于 2013-05-23T12:14:40.970 回答