使用canvas.js制作條形圖

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） ，以確保其余代碼正常工作。

所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 與github網站

使用canvas.js制作條形圖

問題描述

1 個解決方案

解決方案1
0 2018-07-11 22:40:15

使用canvas.js制作條形圖

問題描述

1 個解決方案

解決方案1 0 2018-07-11 22:40:15

解決方案1
0 2018-07-11 22:40:15