Question

我正在尝试设置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"
  }

加载CSV文件时出现ZingChart错误

ZingChart error loading CSV file

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

我错过了什么吗？

Answer 1

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

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

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

使用zingchart加载CSV文件

1 个答案: