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

【问题标题】：How to show labels for a bar chart using c3js?如何使用 c3js 显示条形图的标签？
【发布时间】：2019-11-12 07:14:46
【问题描述】：

我想使用 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

【问题讨论】：

x 轴上的标签？
我的问题中有一张图片，以更好地展示我的想法

标签： javascript c3.js

【解决方案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;
}

将生成

【讨论】：

我的问题和问题中有一张图片，以更好地展示我的想法

【解决方案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。

【讨论】：