javascript - 是否可以为 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 轴标 checkout 现。这让我相信要么无法加载新的 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);