C3.js chart.load 未加载 x/y 轴图

Question

我已经建立了一个 xy 图表，我正在尝试加载一个新的数据集，但由于某种原因，数据永远不会在图表中生成：

<div id="graph"></div>

<script>
    var chart = c3.generate({
        bindto: '#graph',
        data: {
            xs: {
                'data1': 'x1',
                'data2': 'x2',
            },
            columns: [
                ['x1', 10, 30, 45, 50, 70, 100],
                ['x2', 30, 50, 75, 100, 120],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 20, 180, 240, 100, 190]
            ]
        }
    });

    setTimeout(function () {
        chart.load({
            bindto: '#graph',
            data: {
                xs: {
                    'data3': 'x3',
                },
                columns: [
                   ['x3', 20, 40, 55, 60, 80, 110],
                   ['data3', 30, 150, 260, 120, 90]
                ]
            }

        });
    }, 2000);

</script>

有人知道为什么会这样吗？我知道 chart.unload 工作正常，我尝试过添加和删除 bindto: 'graph'，但没有任何效果

Answer 1

根据the docs，load函数不需要data参数，所以应该是这样的：

chart.load({
    bindto: '#graph',
    xs: {
        'data3': 'x3',
    },
    columns: [
        ['x3', 20, 40, 55, 60, 80, 110],
        ['data3', 30, 150, 260, 120, 90]
    ]
});

演示sn-p：

var chart = c3.generate({
        bindto: '#graph',
        data: {
            xs: {
                'data1': 'x1',
                'data2': 'x2',
            },
            columns: [
                ['x1', 10, 30, 45, 50, 70, 100],
                ['x2', 30, 50, 75, 100, 120],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 20, 180, 240, 100, 190]
            ]
        }
    });

    setTimeout(function () {
        chart.load({
            bindto: '#graph',
            xs: {
                'data3': 'x3',
            },
            columns: [
               ['x3', 20, 40, 55, 60, 80, 110],
               ['data3', 30, 150, 260, 120, 90]
            ]
        });
    }, 2000);

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.8/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.8/c3.js"></script>

<div id="graph"></div>