时间戳

首页 > 解决方案 > Chartjs 显示二维数组的标签

javascript - Chartjs 显示二维数组的标签

问题描述

我想为我的条形图添加标签，为此我也在使用 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'
},

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

标签： javascriptchart.js

解决方案

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

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

基本上在格式化程序值中是每条数据的标签内容本身。我在文档中找到了这个，但我的用例不一样，我把显示选项误认为是格式化程序。

推荐阅读