如何在 Chart.js 中过滤阴影或投影？答案

【问题标题】：How to filter shadow or Drop Shadow in Chart.js?如何在 Chart.js 中过滤阴影或投影？
【发布时间】：2017-01-02 23:44:28
【问题描述】：

有没有办法在图表中投影？我在任何类型的图表中都找不到自定义阴影的选项。

我想要的是在我的图表中的线条或条形上投影。但我认为这是不可能的。有没有办法在样式表中手动定义filter:drop-shadow() 或box-shadow？

更新：向我建议的可能解决方案不起作用！我复制并粘贴了作为示例提供的代码，但抛出以下错误

注意：我使用的是最新的 Chartbundle.js

未捕获的类型错误：无法读取未定义的属性“扩展”

    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 = '#000';
      ctx.shadowBlur = 10;
      ctx.shadowOffsetX = 8;
      ctx.shadowOffsetY = 8;
      originalStroke.apply(this, arguments)
      ctx.restore();
    }
  }
});

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

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

<canvas id="canvas"></canvas>

【问题讨论】：

Styling Bars and Lines with Chart.js的可能重复
我只是复制并粘贴了示例提供的代码，但它抛出了这个错误 Uncaught TypeError: (intermediate value).LineAlt is not a function
现在它说 Uncaught TypeError: Cannot read property 'extend' of undefined
你可以在这里添加你的代码
已更新代码！请看一下。

标签： javascript chart.js

【解决方案1】：

这是工作示例代码。

HTML：

<div class="shadowParent">
  <canvas id="myChartShadow2" class="secondShadow" width="600"></canvas>
  <canvas id="myChartShadow" class="firstShadow" width="600"></canvas>
  <canvas id="myChart" width="600"></canvas>
</div>


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

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {
  datasetStrokeWidth: 5,
  scaleFontColor: "rgba(0,0,0,0)",
  scaleLineColor: "rgba(0,0,0,0)",
  scaleShowGridLines: false,
  datasetFill: false,
});

var ctxShadow = document.getElementById("myChartShadow").getContext("2d");
var dataShadow = JSON.parse(JSON.stringify(data));
dataShadow.datasets[0].strokeColor = "rgba(220,220,220,0.15)"
new Chart(ctxShadow).Line(dataShadow, {
  datasetStrokeWidth: 10,
  datasetFill: false,
  pointDot: false,
  showTooltips: false,
});

脚本：

var ctxShadow2 = document.getElementById("myChartShadow2").getContext("2d");
var dataShadow2 = JSON.parse(JSON.stringify(data));
dataShadow2.datasets[0].strokeColor = "rgba(220,220,220,0.1)"
new Chart(ctxShadow2).Line(dataShadow2, {
  datasetStrokeWidth: 20,
  datasetFill: false,
  pointDot: false,
  showTooltips: false,
  scaleFontColor: "rgba(0,0,0,0)",
  scaleLineColor: "rgba(0,0,0,0)",
  scaleShowGridLines: false,
  datasetFill: false,
});

CSS

.shadowParent {
  position: relative;
}

.shadowParent canvas.firstShadow {
  position: absolute;
  left: 10px;
  top: 30px;
  z-index: -1;
}

.shadowParent canvas.secondShadow {
  position: absolute;
  left: 10px;
  top: 30px;
  z-index: -1;
}

小提琴 - http://jsfiddle.net/eafxLd55/

【讨论】：