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

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 中输入文件位置 D:\DT-John\csvtest1.html 或 Chrome浏览器只会显示一个空白页面。

我测试了 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://" 请求视为没有来源“Same Origin Policy”的目的。

运行本地主机上的网络服务器并从那里提供 csv 在这种情况下应该可以正常工作。请检查浏览器开发人员控制台以获取更多信息以及是否抛出任何错误。

Answer 2

多亏了@Vishwas R 的回复，又瞎折腾了一番，发现确实是cross-origin请求受限的问题。基本上它可以从 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 图表代码会导致空白页

Don't know why CanvasJS charting code results in blank page

javascript

html

csv

graph

canvasjs