c3js数据标签的位置 [英] c3js position of data labels

问题描述

是否有可能更改 c3 条形图中数据上方标签的位置的方法？
在官方文档中，很好地解释了如何在x和y测量轴上改变标签的位置，操作y和x整数，但是我没有找到任何数据标签。

Is there any possible way to change a positions of labels above the data in c3 bar chart? In official documentation there is well explained how to change positions of labels on x and y measurement axis with manipulation of y and x integer, but I did not found anything for data labels.

我尝试用 d3 指向它，其中 c3 是基于 console.log 返回我null：

I've tried to point to it with plain d3 on which c3 is based but console.log returns me null:

d3.selectAll(".c3-texts .c3-text").each(function () {
    var yOrigin = d3.select(this).attr('y');
    console.log(yOrigin);
})

，因为它在生成图形之前触发。您可以在这里查看和编辑我的工作：
http://jsfiddle.net/e60o24d0/ p>

because it fires before graph generation. You can see and edit what I'm working on here: http://jsfiddle.net/e60o24d0/

推荐答案

有两种方法可以影响这些标签：

There are two ways you can affect those labels:

在CSS中使用 transform ：

.c3-texts .c3-text text {
  transform: translate(-22px, 0);
}

b。使用 onrendered 回调中的D3选择它们：

b. Select them using D3 in the onrendered callback:

var chart = c3.generate({
    onrendered: () => {
        d3.selectAll('.c3-text').each((v) => {
            console.dir(v);
        });
    },
    data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250],
            ['data2', -50, 150, -150, 150, -50, -150],
            ['data3', -100, 100, -40, 100, -150, -50]
        ],
        groups: [
            ['data1', 'data2']
        ],
        type: 'bar',
        labels: true
    },
    grid: {
        y: {
            lines: [{value: 0}]
        }
    }
});

这比使用setTimeout更好，因为你不必做任何猜测在您能够使用D3选择标签之前，需要先渲染这些标签。

This is better than using setTimeout as you then don't have to make an arbitrary guess as to how long it'll take to render the labels before you're able to select them with D3.

这篇关于c3js数据标签的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！