如何在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中過濾陰影或陰影？

回答

相關問題