Jak umieścić zaokrąglone rogi na wykresie Chart.js

Question

Utworzyłem wykres słupkowy w chart.js, używając poniższego kodu. Jednak chcę nadać kratom zaokrąglone rogi zamiast krawędziowych na górze słupków. Nie mogę znaleźć żadnego sposobu, aby to zrobić przy użyciu globalnych ustawień pliku chart.js. Czy istnieje jakiś sposób osiągnięcia pożądanego efektu?

var barContext = document.getElementById("canvas").getContext("2d"); 

var barGradientFirst = barContext.createLinearGradient(0, 0, 0, 450); 
barGradientFirst.addColorStop(0, 'rgba(112,122,157, 0.1)'); 
barGradientFirst.addColorStop(1, 'rgba(112,122,157, 1)'); 

var barGradientSecond = barContext.createLinearGradient(0, 0, 0, 450); 
barGradientSecond.addColorStop(0, 'rgba(151,122,208, 0.1)'); 
barGradientSecond.addColorStop(1, 'rgba(151,122,208, 1)'); 


var barChartData = { 
labels: ["High", "Med", "Low", "None"], 
datasets : [ 
    { 
     fillColor : barGradientFirst, 
     strokeColor: "rgb(112,122,200)", 
     data: [30, 40, 70, 90] 
    }, { 
     fillColor : barGradientSecond, 
     strokeColor: "rgba(220,100,80,0.8)", 
     data: [50, 60, 65, 20] 
    }] 
}; 

new Chart(barContext).Bar(barChartData, { 
    responsive : true, 
    scaleOverride : true, 
    scaleBeginAtZero : true, 
    scaleSteps : 2, 
    scaleLineWidth: 3, 
    scaleStepWidth : 50, 
    scaleShowLabels : true, 
    scaleShowVerticalLines: false, 
    scaleShowHorizontalLines: false, 
    scaleFontSize: 30, 
    barValueSpacing : 40, 
    barDatasetSpacing : 3, 
    scaleLabel: "<%= value + '%' %>" 
}); 

Answer 1

Oto jak przedłużyć Chart.js, aby narysować wykres słupkowy z zaokrąglonymi narożnikami.

Chart.types.Bar.extend({ 
    name: "BarAlt", 
    initialize: function (data) { 
     Chart.types.Bar.prototype.initialize.apply(this, arguments); 

     if (this.options.curvature !== undefined && this.options.curvature <= 1) { 
      var rectangleDraw = this.datasets[0].bars[0].draw; 
      var self = this; 
      var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.5; 

      // override the rectangle draw with ours 
      this.datasets.forEach(function (dataset) { 
       dataset.bars.forEach(function (bar) { 
        bar.draw = function() { 
         // draw the original bar a little down (so that our curve brings it to its original position) 
         var y = bar.y; 
         // the min is required so animation does not start from below the axes 
         bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1); 
         // adjust the bar radius depending on how much of a curve we can draw 
         var barRadius = (bar.y - y); 
         rectangleDraw.apply(bar, arguments); 

         // draw a rounded rectangle on top 
         Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width/2, bar.y - barRadius + 1, bar.width, bar.height, barRadius); 
         ctx.fill(); 

         // restore the y value 
         bar.y = y; 
        } 
       }) 
      }) 
     } 
    } 
}); 


var lineChartData = { 
    labels: ["January", "February", "March", "April", "May", "June"], 
    datasets: [ 
     { 
      fillColor: "#79D1CF", 
      strokeColor: "#79D1CF", 
      data: [60, 80, 81, 56, 55, 40] 
     }, 
     { 
      fillColor: "#D1CF79", 
      strokeColor: "#D1CF79", 
      data: [34, 43, 43, 12, 65, 65] 
     } 
    ] 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var myLine = new Chart(ctx).BarAlt(lineChartData, { 
    // 0 (flat) to 1 (more curvy) 
    curvature: 1 
}); 

Możesz nieco uprościć kod, jeśli nie potrzebujesz animacji.

---

Fiddle - http://jsfiddle.net/0dzp3jxw/

---