Question

您好，我是JavaScript新手，但是在使用canvas.js库生成图表时遇到了困难。我无法复制的步骤是canvasjs网站https://canvasjs.com/docs/charts/how-to/create-charts-from-csv/上的示例，用于使用csv文档生成图表。从Google表格托管后，我是否需要采取其他方法？

我当前的代码是：

 <!DOCTYPE html>
    <html>
    <head>
        <title>TEst</title>
        <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;
    }

    //Replace text file's path according to your requirement.
    $.get("https://docs.google.com/spreadsheets/d/12o9ekzln8KB3Uyg2fVou6UtIUlrC5GC973Ttk6GsjKs/edit?usp=sharing",function(data) {

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
            text: "Chart from CSV",
            },
            data: [{
            type: "line",
            dataPoints: getDataPointsFromCSV(data)
        }]
        });

        chart.render();

    });
    }

        </script>

</head>
<body>
    <p>it worked:</p>

    <div id="chartContainer" style="height: 370px; width: 100%;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

当我用铬检查时，出现以下错误。

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Answer 1

您好，此问题已经有了一个很好的答案，我在此答案的底部添加了一个链接。

听起来Google不允许您从其网站加载数据。尝试用chart.js网站中的一些示例数据替换您的 dataPoints：getDataPointsFromCSV（data），以确保其余代码可以正常工作。

No 'Access-Control-Allow-Origin' header is present on the requested resource. with github sites

使用canvas.js制作条形图

1 个答案: