4

我有一个关于水平条形图的非常特殊的问题。是否可以在栏本身上显示数据标签？

喜欢这张照片：图表的绘制

我试着这样做：

ticks: {
  padding: -xx,
},

但不幸的是，标签在条形下方消失了，就像条形在标签上方一层一样。

有可能改变这个吗？

这是我的代码：

    var ctx = document.getElementById("stakeholderChart").getContext('2d');
    var stakeholderChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Point 1", "Point 2", "Point 3", "Point 4", "Point 5", "Point 6", "Point 7", "Point 8", "Point 9", "Point 10", "Point 11", "Point 12"],
        datasets: [{
        backgroundColor: "#527a82",
        data: [74, 74, 68,67,65,63,60,60,58,57,45,44],
        }],

    },
    options:  opt 
    });

和我的选择：

var opt = {
            /*Legende ausblenden*/
            legend:{
                display: false,
            },
            /*responsive*/
            responsive: true,

           /*tooltips - hover labels*/
           tooltips: {
            enabled: false,
           },

           /*Layout*/
           layout:{
               padding: {
                   right: 30,
               }
           },

            /* Label auf Balken – Werte hinter balken*/
            plugins: {
                datalabels: {
                        align: 'end',
                        anchor: 'end',
                        color: '#fff',
                        font: {
                            weight: 'bold',
                            size: 14,
                        },
                        formatter: function(value, context) {
                            return value + '%';
                        },
                },
            },/*Plugins ende*/

            /*Animation*/
            animation: {
                duration: 2000
            },/*Animation Ende*/


            /*Achsen Einstellungen*/
            scales: {
                /* x Achse */
                xAxes: [{
                    display: false,
                    gridLines: {
                        display: false
                    },

                    ticks: {
                        beginAtZero: true,
                        max: 90,
                    }

                }], /*x-axes ende*/

                /* Y Achse */ 
                yAxes: [{
                    display: true,
                    gridLines: {
                        display: false,
                    },

                    ticks: {
                        fontColor: '#fff',
                        fontStyle: 'normal',
                        fontSize: 13,
                        padding: -170,
                    },
                    categoryPercentage: 1.0,
                    barPercentage: 0.85,

                }],/* y-axes ende*/
            },  /*Scales Ende*/     
            }

先感谢您！

亲切的问候，埃尼克

4

3 回答 3

2 
       yAxes: [{
                display: true,
                gridLines: {
                    display: false,
                },

                ticks: {
                    fontColor: '#fff',<-- Text is currently white, change to black
                    fontStyle: 'normal',
                    fontSize: 13,
                    padding: -170,,<-- set to 0 or remove
                },
                categoryPercentage: 1.0,
                barPercentage: 0.85,

            }],/* y-axes ende*/
于 2018-08-07T12:17:54.457 回答
1

在代码中添加如下选项

options:  {
"hover": {
                      "animationDuration": 0
                    },
                    "animation": {
                      "duration": 1,
                      "onComplete": function() {
                        var chartInstance = this.chart
                        ctx = chartInstance.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = this.chart.config.options.defaultFontColor;
                        ctx.textAlign = 'left';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function(dataset, i) {
                          var meta = chartInstance.controller.getDatasetMeta(i);
                          meta.data.forEach(function(bar, index) {
                                var data = dataset.data[index];
                                ctx.fillText(data, bar._model.x, bar._model.y - 5);
                          });
                        });
                      }
                    },

} 
});

或访问https://jsfiddle.net/tushar22/bfd98r26/5/

于 2019-03-28T12:19:23.340 回答
0

对于水平条形图，您可以简单地启用该'mirror'选项：

options: {
    scales: {
        yAxes: [{
            ticks: {
                mirror: true //Show y-axis labels inside horizontal bars
            }
        }]
    }
}

查看文档：https ://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

"围绕轴翻转刻度标签，将标签显示在图表内部而不是外部。注意：仅适用于垂直刻度。 "

于 2020-02-25T03:49:35.883 回答