Charts.js: тонкий фон диаграммы пончиков

Question

Я хочу создать диаграмму пончика с тонким серым фоном в ней.

Единственный способ я нашел, чтобы создать это добавление второй пончик диаграммы для создания фона.

Есть ли способ сделать это проще?

HTML:

<div class="chart-cont"> 
    <canvas id="pointsUsed" height="200"></canvas> 
    <canvas id="pointsUsedBg" height="200"></canvas> 
</div> 

CSS:

.chart-cont { 
    position: relative; 
} 

#pointsUsed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
} 

#pointsUsedBg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    transform: scale(0.96,0.96); 
} 

JavaScript:

var pointsUsed = [ 
    { 
     value: 44250, 
     color: "#FF5F33", 
    }, 
    { 
     value: 100000, 
     color: "transparent", 
    }, 
]; 

var pointsUsedBg = [ 
    { 
     value: 100000, 
     color: "#EEEEEE", 
    }, 
]; 

var pointsUsed_ctx = document.getElementById("pointsUsed").getContext("2d"); 
var pointsUsedBg_ctx = document.getElementById("pointsUsedBg").getContext("2d"); 

var pointsUsed = new Chart(pointsUsed_ctx).Doughnut(pointsUsed, { 
    segmentShowStroke: false, 
    segmentStrokeWidth : 0, 
    percentageInnerCutout: 87, 
    showTooltips: false, 
    animationEasing: 'easeInOutCubic', 
    responsive: true 
}); 

var pointsUsedBg = new Chart(pointsUsedBg_ctx).Doughnut(pointsUsedBg, { 
    segmentShowStroke: false, 
    segmentStrokeWidth : 0, 
    percentageInnerCutout: 94, 
    showTooltips: false, 
    animation: false, 
    responsive: true 
}); 

JSFiddle

Спасибо!

Answer 1

Вы можете расширить диаграмму пончик, чтобы сделать это, как и

Chart.types.Doughnut.extend({ 
    name: "DoughnutAlt", 
    initialize: function (data) { 
     // call the actual initialize 
     Chart.types.Doughnut.prototype.initialize.apply(this, arguments); 

     // save the actual clear method 
     var originalClear = this.clear; 
     // override the clear method to draw the background after each clear 
     this.clear = function() { 
      // call the original clear method first 
      originalClear.apply(this, arguments) 

      var ctx = this.chart.ctx; 
      // use any one of the segments to get the inner and outer radius and center x and y 
      var firstSegment = this.segments[0]; 
      // adjust 0.3 to increaase/decrease the width of the background 
      var gap = (firstSegment.outerRadius - firstSegment.innerRadius) * (1 - 0.3)/2; 

      // draw the background 
      ctx.save(); 
      ctx.fillStyle = "#EEE"; 
      ctx.beginPath(); 
      ctx.arc(firstSegment.x, firstSegment.y, firstSegment.outerRadius - gap, 0, 2 * Math.PI); 
      ctx.arc(firstSegment.x, firstSegment.y, firstSegment.innerRadius + gap, 0, 2 * Math.PI, true); 
      ctx.closePath(); 
      ctx.fill(); 
      ctx.restore(); 
     } 
    } 
}); 

Вы могли бы назвать его как этот

var pointsUsed = new Chart(pointsUsed_ctx).DoughnutAlt(pointsUsed, { 
    ... 

---

Fiddle - http://jsfiddle.net/7nfL1m7d/