我已经建立了一个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”,但没有任何效果

最佳答案

根据the docsload函数不需要data参数,因此它应如下所示:

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


演示片段:



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>

关于javascript - C3.js chart.load不为x/y轴图加载,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27726056/

10-11 12:22