如何使用 c3js 显示条形图的标签？

Question

我想使用 C3.js 显示条形图的标签（或提示）。对于我正在做的饼图

pieChartBottomConfig.pie = {
    label: {
        threshold: 0.001,
        format: function(value, ratio, id) {
            ratio = d3.format("%")(ratio); // format ratio
            console.log('id: ' + id);
            console.log('value: ' + value);
            console.log('ratio: ' + ratio);
            console.log([id, value, ratio].join());
            return [id, value, ratio].join(); // used to pass values to the onrender function
        }
    }
};

..它的工作。我尝试做类似的事情

verticalBarChartConfig.bar = {
        label: {
            threshold: 0.001,
            format: function(value, ratio, id) {
                ratio = d3.format("%")(ratio); // format ratio
                console.log('id: ' + id);
                console.log('value: ' + value);
                console.log('ratio: ' + ratio);
                console.log([id, value, ratio].join());
                return [id, value, ratio].join(); // used to pass values to the onrender function
            }
        }
    };

用于条形图，但没有任何反应。请帮我。我怎样才能永久地显示栏上方每个栏的信息？

labels

Answer 1

你可以做这样的事情来生成给定数据的条形图：

c3.generate({
      bindto: "#chart",
      data: {
        type: 'bar',
        columns: [
          ['231', 8],['bar2', 0],
          ['val1', 8],['bar3', 0]
        ],
        groups: [
          ['231','bar2'],
          ['val1','bar3'] 
        ],
        labels: {
          format: function(v, id, i, j) {
            return id;
          }
        }
      },
      axis: {
        x: {
          show: false
        },
        y: {
          show: false
        }
      },
      legend: {
        show: false
      },
      transition: {
        duration: 0
      },
    });

应用css喜欢

.c3-texts .c3-text {
    font: 30px sans-serif;
}
.c3-texts text {
    fill: black !important;
}

会产生

Answer 2

就那样做了

verticalBarChartConfig.data = {
    type: 'bar',
    columns: columnsData,
    colors: {
        data1: function(d, ...others) {
            console.dir(d);
            console.dir(others);
            return d.value < 0 ? 'red' : 'green';
        }
    },
    labels: true
};

我的意思是，我添加了 labels: true .

如何使用 c3js 显示条形图的标签？

How to show labels for a bar chart using c3js?

javascript

c3.js