Question

我正在使用AJAX继续将新数据加载到c3.js图表中。我想在y轴标签上改变的一件事。以此为例：

var chart = c3.generate({
    data: {
        x : 'x',
        columns: [
            ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'],
            ['download', 30, 200, 100, 400],
            ['loading', 901, 100, 140, 200],
        ],
        groups: [
            ['download', 'loading']
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category' // this needed to load string x value
        },
        y: {
            label: {
                text: 'Y-Axis #1',
                position: 'outer-middle'
            }
        }
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'],
            ['download', 130, 200, 150, 350],
            ['loading', 190, 180, 190, 140],
        ],
        axis: {
            y: {
                label: {
                    text: 'Change Y-Axis text to this',
                    position: 'outer-middle'
                }
            }
        }             
    });
}, 1000);

每当运行时，只显示y轴标签'Y轴＃1'。我希望在这种情况下加载的y轴'Change Y-Axis text to this'不显示。即使我发表评论

y: {
    label: {
        text: 'Y-Axis #1',
        position: 'outer-middle'
    }
}

然后没有出现y轴标签。这让我相信无法加载新的y轴标签，或者我做错了。

我尝试了不同的方法并获得了实际的元素：

<text class="c3-axis-y-label" transform="rotate(-90)" x="-278" dx="0" dy="-38" style="text-anchor: middle;">Y-Axis #1</text>

我尝试用jQuery更改它

$(".c3-axis-y-label").text('lol');

但无济于事，它没有用，因为我觉得这只适用于跨度。

任何人都可以帮助我吗？

Answer 1

您可以更改y轴，它与最初设置它的语法不同。似乎有一个问题是在chart.load不起作用后立即尝试更改它，但它确实在之前和孤立地进行。我怀疑chart.load可能是异步的，并在完成后恢复之前的标签。

var chart = c3.generate({
    data: {
        x : 'x',
        columns: [
            ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'],
            ['download', 30, 200, 100, 400],
            ['loading', 901, 100, 140, 200],
        ],
        groups: [
            ['download', 'loading']
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category' // this needed to load string x value
        },
        y: {
            label: {
                text: 'Y-Axis #1',
                position: 'outer-middle'
            }
        }
    }
});

setTimeout(function () {
    chart.axis.labels({y: 'New Y Axis Label'});
    chart.load({
        columns: [
            ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'],
            ['download', 130, 200, 150, 350],
            ['loading', 190, 180, 190, 140],
        ],
    });

}, 1000);

setTimeout(function () {

    chart.load({
        columns: [
            ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'],
            ['download', 130, 220, 150, 350],
            ['loading', 190, 180, 190, 140],
        ],
    });
    chart.axis.labels({y: 'New Y Axis Label 2'});
}, 2000);

setTimeout(function () {
    chart.axis.labels({y: 'New Y Axis Label 3'});
}, 4000);

是否可以为c3.js加载新的y轴标签？

1 个答案: