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

Question

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

Somethink like in this 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",

                }

            }]

        }

    };

实际上，从这个答案中得到的修改插件的代码不包括在内，因为它根本不起作用。

Answer 1

你可以在绘制之前自定义代码工作演示：https ://jsfiddle.net/4rasm1hc/let draw = Chart.controllers.line.prototype.draw;Chart.controllers.line = Chart.controllers.bar.extend({&nbsp; &nbsp; draw: function() {&nbsp; &nbsp; &nbsp; &nbsp; draw.apply(this, arguments);&nbsp; &nbsp; &nbsp; &nbsp; let ctx = this.chart.chart.ctx;&nbsp; &nbsp; &nbsp; &nbsp; let _stroke = ctx.stroke;&nbsp; &nbsp; &nbsp; &nbsp; ctx.stroke = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.save();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.shadowColor = '#000000';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.shadowBlur = 10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.shadowOffsetX = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.shadowOffsetY = 4;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _stroke.apply(this, arguments)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.restore();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }});Chart.defaults.LineWithLine = Chart.defaults.bar;Chart.controllers.LineWithLine = Chart.controllers.bar.extend({&nbsp; &nbsp;draw: function(ease) {&nbsp; &nbsp; &nbsp; Chart.controllers.line.prototype.draw.call(this, ease);&nbsp; &nbsp; &nbsp; if (this.chart.tooltip._active && this.chart.tooltip._active.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var activePoint = this.chart.tooltip._active[0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ctx = this.chart.ctx,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x = activePoint.tooltipPosition().x+15,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;topY =6000,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width=activePoint._view.width,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;bottomY = 0;&nbsp; &nbsp; &nbsp; &nbsp; console.log(activePoint);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// draw line&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ctx.save();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ctx.beginPath();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ctx.moveTo(x, topY);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ctx.lineTo(x+width-10, bottomY+30);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ctx.lineWidth = width*4;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ctx.strokeStyle = '#e5e0e01a';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ctx.stroke();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ctx.restore();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}});