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'

Answer 2

我得到了它的工作！我必须使用--allow-file-access-from-files标志运行Chrome，以便打开.csv文件。

将数据加载到c3.js的图形中（尝试使此示例正常工作）

2 个答案: