如何在悬停的条形图上添加“阴影”？

Question

在chartJS中悬停索引时是否可以添加一些阴影？

Somethink像在此answer中，当悬停点时会添加一条线，但我将其与条形图一起使用，并使它看起来像这样：

这是我的实际图表jsfiddle

 <div class="chart-area chart-reparti">
      <canvas id="chartReparti" width="1600" height="250"></canvas>
 </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>


var optionsReparti = {
        maintainAspectRatio: false,
        legend: {
            display: true
        },
        tooltips: {
            backgroundColor: '#f5f5f5',
            titleFontColor: '#333',
            bodyFontColor: '#666',
            displayColors: true,
            mode: 'index',
            intersect: 0
        },
        responsive: true,
        scales: {
            yAxes: [{
                id: 'importo',
                gridLines: {
                    drawBorder: false,
                    borderDash: [4, 8],
                    color: 'rgba(0,132,255,0.4)',
                },
                ticks: {
                    beginAtZero: true,
                    userCallback: function (value, index, values) {
                        return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                    }
                }
            }, {
                id: 'qta',
                gridLines: {
                    drawBorder: false,
                    borderDash: [4, 8],
                    color: 'rgba(247,136,0,0.4)',
                },
                ticks: {
                    beginAtZero: true
                }
            },
            ],
            xAxes: [{
                categoryPercentage: 1,
                barPercentage: 0.4,
                gridLines: {
                    drawBorder: false,
                    color: 'rgba(225,78,202,0.1)',
                    zeroLineColor: "transparent",
                }
            }]
        }
    };


    var ctx = document.getElementById("chartReparti").getContext('2d');

    var gradientImporto = ctx.createLinearGradient(0, 170, 0, 50);
    gradientImporto.addColorStop(0, "rgba(0, 98, 255, 1)");
    gradientImporto.addColorStop(1, "rgba(84, 150, 255, 1)");

    var gradientQuantita = ctx.createLinearGradient(0, 170, 0, 50);
    gradientQuantita.addColorStop(0, "rgba(247, 136, 0, 1)");
    gradientQuantita.addColorStop(1, "rgba(255, 209, 72, 1)");

    var chartReparti = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Cane', 'Gatto', 'Accessori', 'Mangime', 'Carne', 'Cane', 'Gatto', 'Accessori', 'Mangime', 'Carne'],
            datasets: [{
                label: "Quantità",
                yAxisID: 'qta',
                fill: true,
                backgroundColor: gradientQuantita,
                pointBackgroundColor: '#f78800',
                data: [15, 15, 29, 10, 35, 12, 29, 10, 35, 12]
            }, {
                    label: "Importo",
                    yAxesID: 'importo',
                    fill: true,
                    backgroundColor: gradientImporto,
                    pointBackgroundColor: '#0084ff',
                    data: [2954, 4564, 2954, 4564, 3456, 4212, 5060, 3456, 4212, 5060]
                }
            ]
        },
        options: optionsReparti
    });

实际上不包括从此answer获得的经过修改的插件的代码，因为它根本无法使用。

Answer 1

您可以在绘制代码之前自定义代码