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

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-Axis #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 轴标签？

Is it possible to load a new y-axis label for c3.js?

javascript

jquery

c3.js