使用 zingchart 加载 CSV 文件

Question

我正在尝试设置 ZingChart，以便它绘制来自本地 CSV 文件的数据。

我有一个使用 csv 和数据字符串属性的工作示例，可以毫无问题地呈现图形：

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

我是不是漏掉了什么？

Answer 1

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

如果你打开控制台，你会看到： 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 请求，您需要将其上传到 website/server 或启动您自己的本地 Apache Web 服务器实例，例如WAMP，LAMP，AMPPS，XAMPP。

使用 zingchart 加载 CSV 文件

Loading a CSV file with zingchart

javascript

csv

charts

zingchart