Question

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

以下是代码和代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

扩展图表并覆盖draw函数将是一种（复杂）方法。

更简单的方法是复制图表画布，隐藏所有其他元素（网格线，缩放标签......），以不同的方式设置线条（更粗，灰色）。然后将此复制画布放在原始画布的底部和右下方。

<强> 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感觉），但如果比例很重要，你可以将它移动到第一层（相比之下，这更像是粗略的图形）

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

Answer 2

您可以使用过滤器：

    g.ct-series {filter:url(#shadow);}
    <defs>
        <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
            <feDropShadow dx="2" dy="2" stdDeviation="6" flood-opacity="0.80" />
        </filter>
    </defs>

是否可以在chart.js折线图中添加阴影？

2 个答案: