javascript - 是否可以向 chart.js 折线图添加阴影？

Question

我正在使用 chart.js 构建折线图。我想知道是否可以在我显示的折线图中添加阴影。澄清一下，我的意思是给线条本身添加一个阴影。像这样:

这是代码和代码片段。

// Line Chart
var ctx = document.getElementById("salesData").getContext("2d");

var gradient = ctx.createLinearGradient(0,0,700,0);
    gradient.addColorStop(0, 'rgba(255, 204, 128, 1)');   
    gradient.addColorStop(0.5, 'rgba(255, 152, 0, 1)');
    gradient.addColorStop(1, 'rgba(239, 108, 0, 1)');

var salesData = {
  labels: ["1", "2", "3", "4", "5", "6", "7", "8"],
  datasets: [
    {
      label: "Front",
      fillColor: "rgba(0, 0, 0, 0)",
      strokeColor: gradient,
      pointColor: gradient,
      pointStrokeColor: "#202b33",
      pointHighlightStroke: "rgba(225,225,225,0.9)",
      data: [0, 10, 40, 48, 55, 64, 55, 72]
    }
  ]
};


window.myLineChart = new Chart(ctx).Line(salesData, {
  pointDotRadius : 0,
  pointDotStrokeWidth : 0,
  datasetStrokeWidth : 4,
  scaleShowVerticalLines: true,
  scaleGridLineWidth : 2,
  scaleShowGridLines : true,
  scaleGridLineColor : "rgba(225, 255, 255, 0.02)",
  scaleOverride: true,
  scaleSteps: 12,
  scaleStepWidth: 10,
  scaleStartValue: 0,

  responsive: true

});

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<canvas id="salesData"></canvas>

Answer 1

扩展图表并覆盖 draw 函数是一种(复杂的)方法。

一种更简单的方法是复制图表 Canvas ，隐藏所有其他元素(网格线、刻度标签...)，以不同方式设置线条样式(更粗且呈灰色阴影)。然后将此复制 Canvas 放置在原始 Canvas 的下方和右侧。

CSS

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

HTML

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

脚本

...

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

---

如果你的影子不够模糊你可以再加一层

CSS

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

HTML

<div class="shadowParent">
    <canvas id="myChartShadow2" class="secondShadow" width="600"></canvas>
    ...

脚本

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,
});

请注意，比例尺与第一个阴影对齐(它赋予它更多 3D 的感觉)，但如果比例尺很重要，您可以将其移动到第一层(相对于这是一种看起来更粗糙的图表)

---

fiddle - http://jsfiddle.net/fjyj1021/

---