Question

我正在使用Chart.js插件显示条形图，并且得到如下输出：

我的问题是，在为bar渲染值后如何添加自定义文本？例如，在1月，值显示为56。我要在其旁边添加％增加/减少的信息（即56 [115％]）。

这是我的代码

    window.chartHeadcount = new Chart(document.getElementById("barChartHeadcount"), {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'Billed',
                backgroundColor: 'rgb(0, 197, 106)',
                data: billedHeadCount
            }, {
                label: 'Unbilled',
                backgroundColor: 'rgb(255, 114, 107)',
                data: unBilledHeadCount
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Community Headcount - ' + Options.Globals.Year
            },
            tooltips: {
                mode: 'index',
                intersect: false
            },
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: false
                }],
                yAxes: [{
                    stacked: false
                }]
            }
        }
    });

Answer 1

您可以使用插件chartjs-datalabels并设置formatter属性来设置自定义标签。

创建了一个小提琴供您参考-> http://jsfiddle.net/upmth2cq/1/

希望有帮助！

data: function () {
  return {
    currentWeek: null,
    slots : []
  }
},
created: function () {
  this.currentWeek = moment().startOf('week')
  this.slots = this.$firestoreRefs['slots'].where('start', '>=', this.currentWeek)
},

使用Chart.js将自定义文本添加到条形图标签值

1 个答案: