javascript - Highcharts:使用 CSV 预处理数据

Question

您好，我正在开始使用 Highcharts for Datajournalism，我正在尝试按照文档“处理文件中的数据”( http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-file-csv-xml-json) 中的说明从 CSV 文件加载数据

但是，我唯一得到的是一个空白页和这个错误:XMLHttpRequest 无法加载 file:///Users/.../data.csv。收到无效响应。因此不允许访问 Origin 'null'。

我的文件 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>

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

Answer 1

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