Question

我不知道为什么它不起作用。我是这个领域的新手。我已经保存了一个文件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.my 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文件中获取数据，但这些文件会随着时间的推移而更新。

Answer 1

get请求是异步的，您将其视为同步。

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

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

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

在JavaScript中读取CSV文件

1 个答案: