javascript - Chart js垂直线z-index

Question

我想在图表 js 中更改垂直线的行为。目前垂直线在我的点和悬停点之上:我希望它在后面。我的代码设置贴在下面。这条线也是在悬停时绘制的。所以我只想更改垂直线的 z-index。这条线有 z-index 如果有我如何定位它？

我的代码

   var ctx = document.getElementById('chart').getContext("2d");
    var gradientStroke = ctx.createLinearGradient(1000, 1000, 1000, 0);

    gradientStroke.addColorStop(1, "rgb(33, 240, 43)");
    gradientStroke.addColorStop(0.25, "rgb(21, 168, 226)");
    gradientStroke.addColorStop(0.5, "rgb(21, 168, 226)");
    gradientStroke.addColorStop(0, "rgb(14, 144, 177)");


    var data = {
        legend: false,
        labels: ["02 FEB", "03 FEB", "04 FEB", "05 FEB", "06 FEB", "07 FEB", "08 FEB", "09 FEB", "10 FEB", "11 FEB", "12 FEB"],
        datasets: [{
            fill: false,
            backgroundColor: gradientStroke,
            borderColor: gradientStroke,
            borderWidth: 4,
            data: [9412, 17000, 18000, 11000, 9254, 7200, 11600, 15644, 11222, 13333, 12545],
            pointBorderWidth: 9,
            pointRadius: 9,
            pointBorderColor: 'transparent',
            pointHoverRadius: 8,
            pointHoverBorderWidth: 3,
            pointHoverBackgroundColor: '#27f327',
            pointHoverBorderColor: 'white',
            pointBackgroundColor: 'transparent'


        }]
    };
    var options = {
        hover: {
            mode: 'index',
            intersect: true
        },
        tooltips: {
            backgroundColor: '#FFF',
            bodyFontColor: '#393f5b',
            bodyFontSize: 20,
            displayColors: false,
            bodySpacing: 10,
            intersect: false,
            bodyFontStyle: 'bold',
            xPadding: 15,
            yPadding: 15,
            mode: 'index',
            callbacks: {
                title: function() {}
            }
        },
        legend: {
            display: false
        },
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                stacked: true,
                gridLines: {
                    display: true,
                    color: "#6e6e6e26",
                    padding: 0,
                },
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    max: 20000,
                    stepSize: 5000,
                    display: false
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false,
                    color: "#6e6e6e26",

                },
                ticks: {
                    fontSize: 14,
                    fontColor: '#afb6d4',
                }
            }]
        }
    };

    let draw = Chart.controllers.line.prototype.draw;
    Chart.controllers.line.prototype.draw = function() {
        draw.apply(this, arguments);
        let ctx = this.chart.chart.ctx;
        let _stroke = ctx.stroke;
        ctx.stroke = function() {
            ctx.save();
            ctx.shadowColor = '#4b4b4b8e';
            ctx.shadowBlur = 20;
            ctx.shadowOffsetX = 1;
            ctx.shadowOffsetY = 2;
            _stroke.apply(this, arguments);
            ctx.restore();
        }
    };
    Chart.defaults.LineWithLine = Chart.defaults.line;
    Chart.controllers.LineWithLine = Chart.controllers.line.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,
                    topY = this.chart.scales['y-axis-0'].top,
                    bottomY = this.chart.scales['y-axis-0'].bottom;

                // draw line
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(x, topY);
                ctx.lineTo(x, bottomY);
                ctx.lineWidth = 2;
                ctx.strokeStyle = '#000';
                ctx.shadowBlur = 1;
                ctx.stroke();
                ctx.restore();
            }
        }
    });
    var chart = new Chart(ctx, {
        type: 'LineWithLine',
        data: data,
        options: options
    });

Answer 1

在垂直线绘制之后移动 Chart.controllers.line.prototype.draw.call(this, ease);:

var ctx = document.getElementById('chart').getContext("2d");
var gradientStroke = ctx.createLinearGradient(1000, 1000, 1000, 0);

gradientStroke.addColorStop(1, "rgb(33, 240, 43)");
gradientStroke.addColorStop(0.25, "rgb(21, 168, 226)");
gradientStroke.addColorStop(0.5, "rgb(21, 168, 226)");
gradientStroke.addColorStop(0, "rgb(14, 144, 177)");


var data = {
  legend: false,
  labels: ["02 FEB", "03 FEB", "04 FEB", "05 FEB", "06 FEB", "07 FEB", "08 FEB", "09 FEB", "10 FEB", "11 FEB", "12 FEB"],
  datasets: [{
    fill: false,
    backgroundColor: gradientStroke,
    borderColor: gradientStroke,
    borderWidth: 4,
    data: [9412, 17000, 18000, 11000, 9254, 7200, 11600, 15644, 11222, 13333, 12545],
    pointBorderWidth: 9,
    pointRadius: 9,
    pointBorderColor: 'transparent',
    pointHoverRadius: 8,
    pointHoverBorderWidth: 3,
    pointHoverBackgroundColor: '#27f327',
    pointHoverBorderColor: 'white',
    pointBackgroundColor: 'transparent'


  }]
};
var options = {
  hover: {
    mode: 'index',
    intersect: true
  },
  tooltips: {
    backgroundColor: '#FFF',
    bodyFontColor: '#393f5b',
    bodyFontSize: 20,
    displayColors: false,
    bodySpacing: 10,
    intersect: false,
    bodyFontStyle: 'bold',
    xPadding: 15,
    yPadding: 15,
    mode: 'index',
    callbacks: {
      title: function() {}
    }
  },
  legend: {
    display: false
  },
  maintainAspectRatio: false,
  scales: {
    yAxes: [{
      stacked: true,
      gridLines: {
        display: true,
        color: "#6e6e6e26",
        padding: 0,
      },
      ticks: {
        beginAtZero: true,
        min: 0,
        max: 20000,
        stepSize: 5000,
        display: false
      }
    }],
    xAxes: [{
      gridLines: {
        display: false,
        color: "#6e6e6e26",

      },
      ticks: {
        fontSize: 14,
        fontColor: '#afb6d4',
      }
    }]
  }
};

let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
  draw.apply(this, arguments);
  let ctx = this.chart.chart.ctx;
  let _stroke = ctx.stroke;
  ctx.stroke = function() {
    ctx.save();
    ctx.shadowColor = '#4b4b4b8e';
    ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 2;
    _stroke.apply(this, arguments);
    ctx.restore();
  }
};
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
  draw: function(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,
        topY = this.chart.scales['y-axis-0'].top,
        bottomY = this.chart.scales['y-axis-0'].bottom;

      // draw line
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(x, topY);
      ctx.lineTo(x, bottomY);
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#000';
      ctx.shadowBlur = 1;
      ctx.stroke();
      ctx.restore();
    }
    Chart.controllers.line.prototype.draw.call(this, ease);
  }
});
var chart = new Chart(ctx, {
  type: 'LineWithLine',
  data: data,
  options: options
});

#chart {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>