Chartjs v2 kontur gölgesi

Question

Çizgi grafiğim için bir kontur çizmek istiyorum. Ama bulduğum her çözüm sadece chartjs v1 ile çalışır.

En yenisi için herhangi bir çözüm mü?

i chartjs v1 ile tasarlanmış, ama dediğin gibi, ben sürümü ile 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 bunu yapmak için hiçbir yol bulmuş thats ne:

<canvas id="canvas" width="600" height="300" style="background-color:#fff"></canvas> 

Answer 1

Evet!

Sen ChartJS v2 şu şekilde ile çizgi grafik için aynı inme gölge efekti başarabileceğini

...

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", "February", "March", "April", "May", "June", "July"], 
 
     datasets: [{ 
 
      label: "My First dataset", 
 
      data: [65, 59, 80, 81, 56, 55, 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>