Question

我试图获取一个html文件从csv文件中提取数据并在浏览器中生成图表。我使用CanvasJS中的以下代码，从https://canvasjs.com/docs/charts/how-to/create-charts-from-csv/页面底部的最终结果中逐字逐句复制

<!DOCTYPE html>
<html>
<head>
<title>Chart using XML Data</title>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
    window.onload = function() {
        var dataPoints = [];

        function getDataPointsFromCSV(csv) {
            var dataPoints = csvLines = points = [];
            csvLines = csv.split(/[\r?\n|\r|\n]+/);         

            for (var i = 0; i < csvLines.length; i++)
                if (csvLines[i].length > 0) {
                    points = csvLines[i].split(",");
                    dataPoints.push({ 
                        x: parseFloat(points[0]), 
                        y: parseFloat(points[1])        
                    });
                }
            return dataPoints;
        }

    $.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                 text: "Chart from CSV",
            },
            data: [{
                 type: "line",
                 dataPoints: getDataPointsFromCSV(data)
              }]
         });

          chart.render();

    });
  }
</script>
</head>
<body>
    <div id="chartContainer" style="width:100%; height:300px;"></div>
</body>
</html>

我正在使用Windows 8，当我将其保存到桌面并在我的Firefox或Chrome浏览器中输入文件位置D：\ DT-John \ csvtest1.html时，它只会产生一个空白页。

我测试了https://canvasjs.com/html5-javascript-line-chart/中的以下代码，只是为了看看它是否会在html中使用数据进行图形处理，而不是从csv中提取，并且它运行良好（再次，我通过输入D：\ DT-来运行它）我的浏览器中的John \ csvtest2.html。

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title:{
        text: "Simple Line Chart"
    },
    axisY:{
        includeZero: false
    },
    data: [{        
        type: "line",       
        dataPoints: [
            { y: 450 },
            { y: 414},
            { y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" },
            { y: 460 },
            { y: 450 },
            { y: 500 },
            { y: 480 },
            { y: 480 },
            { y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
            { y: 500 },
            { y: 480 },
            { y: 510 }
        ]
    }]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

我在某处读到它可能与jQuery无法正常工作有关，所以我测试了https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_get中的以下代码，其方式与我测试上面的文件完全相同，并且它的工作方式应该如此，所以我认为我已经排除了jQuery的问题。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());
    });
});
</script>
</head>
<body>

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>

</body>
</html>

基本上我已经花了几天时间试图让这个东西生成图表并且无法弄清问题是什么。我对编码非常陌生，所以我确定我只是忽略了一些明显的东西。任何见解都将不胜感激。

Answer 1

出于安全原因，浏览器会限制“Cross-Origin Requests”。因此您无法从不同来源读取csv文件。

同时，浏览器允许ajax请求访问您计算机上的任何文件是不安全的，因此大多数浏览器似乎将“file：//”请求视为没有“{{{ 3}}”。

在localhost上运行web服务器并从那里提供csv应该可以正常工作。请检查Browser Developer Console以获取更多信息以及是否有任何错误。

Answer 2

感谢@Vishwas R的回应并且更多地讨论它，我发现问题确实存在于受限制的跨源请求中。基本上它可以从csv文件创建图形，但文件必须是本地的，而不是来自外部源。我最终使用的代码与我最初在我的问题中发布的代码不同，但它通过从csv文件中提取数据来创建CanvasJS图，这是我的目标。使用Xampp在本地运行它，这是最终工作的代码，保存为php文件：

<?php

$file = fopen("C:/xampp/htdocs/data.csv", "r");
$keys = array("y", "label");
$dataPoints = array();
while ($row = fgetcsv($file)) {
  $dataPoints[] = array_combine($keys, $row);
}
?>

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Example Graph"
    },
    axisY: {
        title: "Population"
    },
    data: [{
        type: "line",
        dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    }]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

不知道为什么CanvasJS图表代码会导致空白页面

2 个答案: