如何在Chartjs中插入阴影？

Question

我需要在图形中插入阴影，在字体中插入 text-shadow ，下面的代码是在图形中插入阴影< / strong>，然后将鼠标悬停在字体中。

我正在使用 chartjs 的新版本，下面的结果不是我想要的...我想在其中插入文本阴影图表中的字体和阴影..但是，图表的阴影将在图形显示后立即显示，而文字的阴影在显示字体时显示。

    var ctx = document.getElementById("vendaChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["jan", "fev", "mar", "abr", "mai", "jun", "ago", "set", "out", "nov", "dez"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 10, 3, 100, 6, 9, 12, 4],
                backgroundColor: [
                    'rgb(202, 216, 229)',
                    'rgb(202, 216, 229)',
                    'rgb(202, 216, 229)',
                    'rgb(133, 222, 252)',
                    'rgb(202, 216, 229)',
                    'rgb(202, 216, 229)',
                    'rgb(202, 216, 229)',
                    'rgb(202, 216, 229)',
                    'rgb(202, 216, 229)',
                    'rgb(202, 216, 229)',
                    'rgb(202, 216, 229)',
                    'rgb(202, 216, 229)',
                ],
                borderColor: [
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                    'rgba(0,0,0,0.3)',
                ],
                borderWidth: 1,
            }]
        },
        options: {
            responsive: true,
            legend: { display: false },
            scales: {
                yAxes: [{
                    ticks: {
                        display: false,
                        fontColor: "rgb(255,255,255)"
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                }],
                xAxes: [{
                    ticks: {
                        fontSize: 15,
                        fontColor: "rgb(255,255,255)"
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false
                    }
                }]
            },
            animation: {
                duration: 5000,
                onComplete: function () {
                    var chartInstance = this.chart,
                        ctx = chartInstance.ctx;
                        ctx.font = Chart.helpers.fontString('17', 'normal', Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle =    'white';
                        ctx.textAlign =    'center';
                        ctx.textBaseline = 'bottom';
                        ctx.shadowColor =  'black';
                        ctx.shadowOffsetX = 1; 
                        ctx.shadowOffsetY = 1; 
                        ctx.shadowBlur =    1;
                        Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            Chart.helpers.each(meta.data.forEach(function (bar, index) {
                                var centerPoint = bar.getCenterPoint();
                                ctx.fillText(dataset.data[index], centerPoint.x, centerPoint.y);
                                }), this);
                        }), this);
                }
            }
        }
    });