Javascript Highcharts：使用CSV预处理数据

您好，我正在开始使用Highcharts for Datajournalism，我正在尝试从CSV文件加载数据，如文档“处理文件中的数据”（processing data from a file）中所述

但是，我得到的唯一结果是一个空白页和以下错误： 无法加载XMLHttpRequestfile:///Users/.../data.csv. 收到无效的响应。因此，不允许访问源“null”

My file data.csv与脚本highcharts_2.html本身位于同一文件夹中。Highcharts下载中包含的文件夹“js”也与数据和脚本位于同一文件夹中。下面是我使用的highchart_2.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="js/highcharts.js" type="text/javascript"></script> <!--where you put the high charts library -->

<script>
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: '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');
                $.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);
                    }   
                }); 
                var chart = new Highcharts.Chart(options);
            });
        });


</script>




<div id="container" style="width:100%; height:400px;"></div>

$（文档）.ready（函数（）{
变量选项={
图表：{
renderTo:'容器'，
类型：“列”
},
标题：{
正文：“水果消费”
},
xAxis：{
类别：[]
},
亚克斯：{
标题：{
文本：“单位”
}
},
系列：[]
};
$.get（'data.csv'，函数（数据）{
//分道扬镳
变量行=data.split（'\n'）；
$.each（行，函数）（行号，行）{
var items=line.split（'，'）；
//标题行包含类别
如果（行号==0）{
$。每个（项目，功能（项目编号，项目）{
if（itemNo>0）options.xAxis.categories.push（项目）；
});
}
//其余行包含名称位于第一个位置的数据
否则{
变量系列={
数据：[]
};
$。每个（项目，功能（项目编号，项目）{
如果（itemNo==0）{
series.name=项目；
}否则{
数据推送（parseFloat（item））；
}
});         
选项。系列。推送（系列）；
}   
}); 
var图表=新的Highcharts.图表（选项）；
});
});

---

我已经搜索了所有的论坛，只要看看html，我认为它应该可以工作，但它没有。我很确定这将是一个“facepalm”，但我就是找不到解决办法。非常感谢你的帮助

您需要从Web服务器而不是本地文件系统加载文件。浏览器会阻止这种情况。

错误代码有点可疑，请仔细检查.././data.csv引用与正在测试的代码中的.data.csv的位置。另外，您使用的URL是什么，假设您正在本地运行此URL。很抱歉这么晚才回来（我在过去几天处于脱机状态）-Web服务器正是问题所在！非常感谢你，塞巴斯蒂安！我在我的网站上试过了，现在可以正常工作了——我也会安装一个本地的Web服务器进行离线测试。伟大的