Javascript 使用zingchart加载CSV文件_Javascript_Csv_Charts_Zingchart

Javascript 使用zingchart加载CSV文件

javascript csv charts

Javascript 使用zingchart加载CSV文件,javascript,csv,charts,zingchart,Javascript,Csv,Charts,Zingchart,我正在尝试设置ZingChart，以便它可以从本地CSV文件中绘制数据我有一个使用csv和数据字符串属性的工作示例，它可以无问题地呈现图形： <!DOCTYPE html> <html> <head> <script src="zingchart/zingchart.min.js"></script> <script> zingchart.MODULESDIR = "zingchart/modules/"

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

ZingChart加载CSV文件时出错

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

我遗漏了什么吗？

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

如果打开控制台，您将看到：

请求的资源上不存在“Access Control Allow Origin”头。因此，不允许访问源站“null”。

无论

index.html

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

您正在向ZingChart文档网站发出跨源请求，该网站不允许您使用其在站点/本地服务器上的资源。如果打开控制台，您将看到：

请求的资源上不存在“Access Control Allow Origin”头。因此，不允许访问Origin'null'。

@Mr.polywhill-没错，我得到了这样一些信息：

XMLHttpRequest无法加载file:///home/eballes/Work/backup/zingchart_test/zingchart/data01.csv. 只有协议方案支持跨源请求：http、data、chrome、chrome extension、https、chrome-extension-resource.ZC.A3.ajax@VM514:1 VM514:1未捕获类型错误：无法读取null的属性“appendChild”

。但我没有接触到他们的资源。。。据我所知，我所有的东西都是（或应该是）本地的。@polywhill先生好的，明白了。我现在让它工作了。基本上，我无法加载中表示的“file://”。所以我需要用Chrome执行——允许从文件访问文件，或者只是在机器上启动一个本地http服务器。感谢你曾经使用过的一个工具，只要你有

index.html

文件，这个网站就可以让你查看你的注册表。最酷的是，他们可以通过AJAX加载具有相对路径的文件。由于站点会定期缓存GIST，因此在代码更新之间更改页面可能需要几分钟的时间。在下面的要点中，我只有索引页和数据。错误非常相似，所有内容都具有本地作用域：

XMLHttpRequest无法加载file:///home/eballes/Work/backup/zingchart_test/zingchart/data01.csv. 跨源请求仅支持协议方案：http、data、chrome、chrome extension、https、chrome-extension-resource.ZC.A3.ajax@VM514:1 VM514:1未捕获类型错误：无法读取null的属性“appendChild”

解释了根本原因和可能的解决方案。谢谢！

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