Question

您好我开始使用Highcharts for Datajournalism，我正在尝试从CSV文件加载数据，如文档中所述＆＃39;处理来自文件的数据＆＃39; （http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-file-csv-xml-json）

然而，我唯一得到的是一个空白页面，这个错误： XMLHttpRequest无法加载file：///Users/.../data.csv。收到无效回复。起源＆＃39; null＆＃39;因此不允许访问。

我的文件data.csv与脚本highcharts_2.html本身位于同一文件夹中。文件夹＆＃39; js＆＃39; Highcharts下载中包含的内容也与数据和脚本位于同一文件夹中。以下是我使用的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>

我已经搜索了所有论坛，只是看看HTML并认为它应该正常工作，但它并没有。我很确定这将是一个＆＃39; facepalm＆＃39;但我无法找到解决方案。非常感谢你的帮助！

Answer 1

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

Highcharts：使用CSV预处理数据

1 个答案: