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

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

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

UPDATE：建议我的可能解决方案不起作用！我复制并粘贴提供的代码作为一个例子，但引发以下错误

注：我使用的是最新的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>

来源

2017-01-02 Hammas

[样式条形和线条与chart.js之]的可能的复制（ http://stackoverflow.com/que sints/34273254/styling-bars-and-lines-with-chart-js） – Garfield

我刚刚复制并粘贴了示例中提供的代码，但它引发了此错误** Uncaught TypeError :(中间值）.LineAlt不是函数** – Hammas

现在它说**未捕获类型错误：无法读取undefined的属性'extend'** – Hammas

这里工作示例代码。

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/

来源

2017-01-02 15:44:28 Garfield

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

回答

相关问题