Chartjs v2描边阴影 [英] Chartjs v2 stroke shadow

问题描述

我想对我的折线图使用笔触阴影。但是我找到的每个解决方案仅适用于chartjs v1。

i would like to use a strokeshadow for my line chart. But every solution that i found works only with chartjs v1.

对最新的解决方案有什么解决方案吗？

Is their any solution for the newest one?

那就是我用chartjs v1设计的，但是就像我说的那样，我发现没有办法在版本2中做到这一点。

thats what i designed with chartjs v1, but just like i said, i found no way to do it with version 2.

jsfiddle

Chart.types.Line.extend({
  name: "LineAlt",
  initialize: function () {
    Chart.types.Line.prototype.initialize.apply(this, arguments);

    var ctx = this.chart.ctx;
    var originalStroke = ctx.stroke;
    ctx.stroke = function () {
      ctx.save();
      ctx.shadowColor = '#E56590';
      ctx.shadowBlur = 10;
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = 4;
      originalStroke.apply(this, arguments)
      ctx.restore();
    }
  }
});

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First dataset",
      fillColor: "#fff",
      strokeColor: "#ffb88c",
      pointColor: "#fff",
      pointStrokeColor: "#ffb88c",
      pointHighlightFill: "#ffb88c",
      pointHighlightStroke: "#fff",
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};


var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx).LineAlt(data, {
  datasetFill: false
});

Html：

<canvas id="canvas" width="600" height="300" style="background-color:#fff"></canvas>

推荐答案

是！

您可以通过以下方式用 ChartJS v2 对折线图完成相同的笔触阴影效果...

You could accomplish the same stroke shadow effect for line chart with ChartJS v2 in the following way ...

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

let ctx = document.getElementById("canvas").getContext('2d');
let myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            data: [65, 59, 80, 81, 56, 55, 40],
            borderColor: '#ffb88c',
            pointBackgroundColor: "#fff",
            pointBorderColor: "#ffb88c",
            pointHoverBackgroundColor: "#ffb88c",
            pointHoverBorderColor: "#fff",
            pointRadius: 4,
            pointHoverRadius: 4,
            fill: false
        }]
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas" width="600" height="300" style="background-color:#fff"></canvas>

这篇关于Chartjs v2描边阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！