Question

我想在条形图中添加标签，为此我也使用了chartjs-plugin-datalabels。问题是我的数据来自两个连接在一起的数组。

我只想看“ y”号，别无其他。我想我必须在options-> datalabels中添加一个参数，但是我无法理解我的用例的文档。谢谢！

这是我正在使用的js。

<script type='text/javascript'>
moment.locale('es'); 
moment().format('L'); 
Chart.plugins.unregister(ChartDataLabels);
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip(); 
});

// gráfico de barras IBM


var color = Chart.helpers.color;
var entregas_ibm_dia = @json($ar_entregas_ibm_dia);
var reversas_ibm_dia = @json($ar_reversas_ibm_dia);


var ctx3 = document.getElementById('canvas').getContext('2d');

var myBar = new Chart(ctx3, {
        type: 'bar',
        data: {
            datasets: [{
                label: 'Entregas',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderWidth: 1,
                data: entregas_ibm_dia
        }, {
                label: 'Reversas',
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderWidth: 1,
                data: reversas_ibm_dia
        }]
        },
        plugins: [ChartDataLabels],
        options: {
                responsive: true,
                legend: {
                        position: 'top',
                },
                title: {
                        display: true,
                        text: 'Reversas v/s abastecimiento'
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'day',
                             displayFormats: {
                                day: 'DD-MM-YYYY'
                            },
                            tooltipFormat: 'll'
                        }
                    }]
                },
                plugins: {
                    datalabels: {
                        display: function(context) {
                                return context.dataset.data[context.dataIndex];
                        }
                    }
                }
            }
});
</script>

编辑：我通过使用一维数组并将日期放在标签上并将其添加为x轴刻度上的刻度源来解决此问题：

ticks: {
    source: 'labels'
},

问题是当数组在一个数据集中而不是另一个数据集中有数据时。

Answer 1

得到答案。并不是真正的火箭科学：

plugins: {
            datalabels: {
                  formatter: function(value, context) {
                                return value['y'];
                    }
            }
         }

在格式化程序值中基本上是每条数据的标签内容本身。我在the docs中发现了这个问题，但用例并不相同，因此我误认为格式化程序的显示选项。

Chart.js显示二维数组的标签

1 个答案: