Question

图表中是否有任何投影方式？我无法在任何类型的图表中找到任何自定义阴影的选项。

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

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

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

未捕获的TypeError：无法读取属性＆＃39;延伸＆＃39;未定义的

    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>

Answer 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/

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

1 个答案: