1

我正在尝试设置 ZingChart，以便从本地 CSV 文件中绘制数据。

我有一个使用 csv 和 data-string 属性的工作示例，可以毫无问题地呈现图形：

<!DOCTYPE html>
<html>

<head>
  <script src="zingchart/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "zingchart/modules/";
  </script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    var myConfig = {
      "type": "line",
      "csv":{
              "data-string":"Model|Highway|City_Ford 150|19|16_Mazda S3|30|21_Prius|42|35",
              "row-separator":"_",
              "separator":"|"
          }
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: "100%"
    });
  </script>
</body>

</html>

但是，更改 csv 使其链接到文件会引发错误：

  "csv": {
    "url": "zingchart/data01.csv"
  }

ZingChart 加载 CSV 文件时出错

ZingChart 加载 CSV 文件时出错

在 ZingChart 教程中有指向 JSFiddle 的链接，因此您可以自由编辑 javascript 并查看结果。如果他们使用 csv/url 配置选项，我也会在他们身上看到相同的错误屏幕。

我错过了什么吗？

4

1 回答 1

3

您正在向 ZingChart 文档网站发出跨域请求，该请求不允许您在您的站点/本地服务器上使用他们的资源。

如果你打开控制台，你会看到： No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

无论您的index.html页面位于何处，您都需要一个名为“zingchart”的目录和一个名为“data01.csv”的文件。此外，由于这是一个 XHR 请求，您需要将其上传到网站/服务器或启动您自己的本地 Apache Web 服务器实例，例如 WAMP、LAMP、AMPPS、XAMPP。

于 2016-02-23T14:47:11.480 回答