Wie Schatten oder Schlagschatten in Chart.js zu filtern?

Question

Gibt es einen Weg des Schlagschattens in Charts? Ich kann keine Option finden, um Schatten in jeder Art von Diagramm anzupassen.

Was ich will, ist Schlagschatten auf Linien oder Balken in meinen Graphen. Aber ich denke, es ist nicht möglich. Gibt es eine Möglichkeit, filter:drop-shadow() oder box-shadow manuell im Stylesheet zu definieren?

UPDATE: Die mögliche Lösung, die mir vorgeschlagen wird, funktioniert nicht! Ich kopierte und der Code als Beispiel angegeben, aber dem folgenden Fehler

Hinweis werfen: ich die neueste Chartbundle.js

Uncaught TypeError: Cannot read property 'extend' of undefined

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

Hier bin mit ist der funktionierende Beispielcode.

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

Script:

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

Fiddle - http://jsfiddle.net/eafxLd55/