将 c3.js 的数据加载到图表中（试图让这个例子起作用）

Question

我正在努力让 this example 工作。

我的 HTML 文件如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>C3</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
    <div id="chart"></div>

    <script>

    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);

    setTimeout(function () {
        chart.load({
            columns:[
                ['data4', 30, 20, 50, 40, 60, 50,100,200]
            ],
            type: 'bar'
        });
    }, 4000);

    setTimeout(function () {
        chart.unload({
            ids: 'data4'
        });
    }, 5000);

    setTimeout(function () {
        chart.load({
            columns:[
                ['data2', null, 30, 20, 50, 40, 60, 50]
            ]
        });
    }, 6000);

    setTimeout(function () {
        chart.unload();
    }, 7000);

    setTimeout(function () {
        chart.load({
            rows: [
                ['data4', 'data2', 'data3'],
                [90, 120, 300],
                [40, 160, 240],
                [50, 200, 290],
                [120, 160, 230],
                [80, 130, 300],
                [90, 220, 320],
            ],
            type: 'bar'
        });
    }, 8000);

    setTimeout(function () {
        chart.load({
            rows: [
                ['data5', 'data6'],
                [190, 420],
                [140, 460],
                [150, 500],
                [220, 460],
                [180, 430],
                [190, 520],
            ],
            type: 'line'
        });
    }, 9000);

    setTimeout(function () {
        chart.unload({
            ids: ['data2', 'data3']
        });
    }, 10000);

    </script>

</body>
</html>

在与 HTML 文件相同的目录中，我有包含两个文件的目录“/data/”：

c3_test.csv:

data1,data2,data3
120,80,200
140,50,210
170,100,250
150,70,300
180,120,280

c3_test2.csv

data1,data2,data3
20,180,400
40,150,310
70,120,470
50,170,400
80,200,380

这正是示例的设置方式，但是，当我在浏览器中打开 HTML 文件时，页面上没有显示任何内容。我知道我的基本设置一定是正确的，因为当我将 this other example for a line chart 中的 simple_multiple.js 代码复制到代码的 javascript 部分时，我得到了示例的精确折线图。我只是不确定为什么图表的 csv 导入不起作用。

我也试过用文件的完整路径替换两个 url，但是没有用。

这是我从浏览器控制台收到的错误消息：

d3.min.js:1 XMLHttpRequest cannot load file:///full/file/path/to/c3_test.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

d3.min.js:1 XMLHttpRequest cannot load file:///full/file/path/to/c3_test2.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

我在 Chrome 和 IE 中运行 HTML，但都没有用。

我是不是遗漏了一些非常明显的东西？任何帮助，将不胜感激。谢谢！

Answer 1

如果 "data" 目录不在项目的根目录下，您将无法通过该引用找到它。每当您有引用时，以“/”开头会使它从根开始。删除第一个 /，它将开始查找当前 HTML 文件所在的目录。

url: '/data/c3_test.csv' 应该是 url: 'data/c3_test.csv'

Answer 2

我成功了！我必须运行 Chrome 使用 --allow-file-access-from-files 标志，以便它可以打开 .csv 文件。

将 c3.js 的数据加载到图表中（试图让这个例子起作用）

Loading data into graph for c3.js (trying to get this example to work)

html

javascript

csv

c3.js