我想在线图上使用一个笔触.但是我发现的每个解决方案都只适用于chartjs v1.
他们的最新解决方案是什么？
多数民众赞成我用chartjs v1设计的,但就像我说的那样,我发现无法用版本2做到这一点.
jsfiddle
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 = '#E56590';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 4;
originalstroke.apply(this,arguments)
ctx.restore();
}
}
});
var data = {
labels: ["January","February","march","April","May","June","July"],datasets: [
{
label: "My First dataset",fillColor: "#fff",strokeColor: "#ffb88c",pointColor: "#fff",pointstrokeColor: "#ffb88c",pointHighlightFill: "#ffb88c",pointHighlightstroke: "#fff",data: [65,59,80,81,56,55,40]
}
]
};
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx).LineAlt(data,{
datasetFill: false
});
HTML：
<canvas id="canvas" width="600" height="300" style="background-color:#fff"></canvas>
解决方法
是!
您可以通过以下方式使用ChartJS v2为折线图完成相同的描边阴影效果…
let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line = Chart.controllers.line.extend({
draw: function() {
draw.apply(this,arguments);
let ctx = this.chart.chart.ctx;
let _stroke = ctx.stroke;
ctx.stroke = function() {
ctx.save();
ctx.shadowColor = '#E56590';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 4;
_stroke.apply(this,arguments)
ctx.restore();
}
}
});
let ctx = document.getElementById("canvas").getContext('2d');
let myChart = new Chart(ctx,{
type: 'line',data: {
labels: ["January",datasets: [{
label: "My First dataset",40],borderColor: '#ffb88c',pointBackgroundColor: "#fff",pointBorderColor: "#ffb88c",pointHoverBackgroundColor: "#ffb88c",pointHoverBorderColor: "#fff",poinTradius: 4,pointHoverRadius: 4,fill: false
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <canvas id="canvas" width="600" height="300" style="background-color:#fff"></canvas>