Как добавить «тень» на гистограмму? - PullRequest
Новая
       7

Как добавить «тень» на гистограмму?

2 голосов
/ 21 апреля 2020

Можно ли добавить тень при наведении указателя на график JS?

Что-то вроде этого ответа , который добавляет линию при наведении точек, но я хотел бы использовать ее с гистограммой и заставить ее выглядеть примерно так:

enter image description here

Вот мой фактический график 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
    });

На самом деле код модифицированного плагина получен из этого ответа не включен, так как он вообще не работал.

1 Ответ

2 голосов
/ 21 апреля 2020

U может настроить код перед его отрисовкой

Рабочая демонстрация: https://jsfiddle.net/4rasm1hc/

let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line = Chart.controllers.bar.extend({
    draw: function() {
        draw.apply(this, arguments);
        let ctx = this.chart.chart.ctx;
        let _stroke = ctx.stroke;
        ctx.stroke = function() {
            ctx.save();
            ctx.shadowColor = '#000000';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 4;
            _stroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

Chart.defaults.LineWithLine = Chart.defaults.bar;
Chart.controllers.LineWithLine = Chart.controllers.bar.extend({
   draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);

      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
         var activePoint = this.chart.tooltip._active[0],
             ctx = this.chart.ctx,
             x = activePoint.tooltipPosition().x+15,
             topY =6000,
             width=activePoint._view.width,
             bottomY = 0;
        console.log(activePoint);
         // draw line
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x+width-10, bottomY+30);
         ctx.lineWidth = width*4;
         ctx.strokeStyle = '#e5e0e01a';
         ctx.stroke();
         ctx.restore();
      }
   }
});
...