时间戳

首页 > 解决方案 > 使用 C3 库时，无法加载 csv 文件

csv - 使用 C3 库时，无法加载 csv 文件

问题描述

我试过这个示例代码，但无法读取 csv 文件。

我将 csv 文件放在确切的位置。（与index.html目录相同）！不是 csv 文件（带有数组数据），它完美地工作。是语法规则改变了还是代码有错误？如果有人可以检查此代码是否有效或无论如何可以帮助我，将不胜感激。

var chart = c3.generate({
    data: {
        url: '/data/c3_test.csv',
        type: 'line'
    }
});

setTimeout(function () {
    chart.load({
        url: '/data/c3_test2.csv'
    });
}, 1000);

setTimeout(function () {
    chart.load({
        columns: [
            ['data1', 130, 120, 150, 140, 160, 150],
            ['data4', 30, 20, 50, 40, 60, 50],
        ],
        unload: ['data2', 'data3'],
    });
}, 2000);

setTimeout(function () {
    chart.load({
        rows: [
            ['data2', 'data3'],
            [120, 300],
            [160, 240],
            [200, 290],
            [160, 230],
            [130, 300],
            [220, 320],
        ],
        unload: 'data4',
    });
}, 3000);

标签： csvdata-visualizationc3.js

解决方案

也许您正在使用file://或加载模型C:/，这与错误消息保持一致，因为它们不是http://。

您可以确认这是您在浏览器控制台上收到的错误消息。但我按照你的要求做了，我得到了“Fetch API 无法加载文件：///C:/data.csv。对于 CORS 请求，URL 方案必须是“http”或“https”。并且 csv 文件也无法加载。

因此，您可以在本地 PC 上安装网络服务器，也可以将模型上传到其他地方并将 url 更改为http://somehost/path/to/file

作为替代方案，如果您使用的是 Chrome，您可以尝试使用 --allow-file-access-from-files 从终端启动它

浏览器不允许使用 ajax 调用的 file:// URL（出于安全原因）。您需要通过 Web 服务器加载您的网页，并使用 http:// 或 https://，而不是 file://，通过该 Web 服务器发出您的 ajax 请求

推荐阅读