使用 canvas.js 制作条形图答案

【问题标题】：Make bar chart using canvas.js使用 canvas.js 制作条形图
【发布时间】：2018-07-11 22:31:02
【问题描述】：

您好，我是 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>

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

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

【问题讨论】：

由于某种原因，如果没有服务器正在运行，我找不到一种方法。

标签： javascript html canvasjs

【解决方案1】：

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

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

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

【讨论】：