Расширение для chart.js 2.X

Question

Я использовал chart.js 1.0.2, не зная, что прибыла версия 2+. Теперь мне нужно fuctionallity, доступное только в 2+ Между тем, я написал несколько расширений для chart.js 1.0.2, которые я бы хотел преобразовать в версию 2+.

Chart.types.Doughnut.extend(
    { 
    name: "DoughnutWithText", 

    draw: function() { 
     Chart.types.Doughnut.prototype.draw.apply(this, arguments); 

     width = this.chart.width, 
     height = this.chart.height; 

     var fontSize = (height/this.options.textScale).toFixed(2); 
     this.chart.ctx.font = fontSize + "em Lato"; 
     this.chart.ctx.textBaseline = "middle"; 
     this.chart.ctx.fillStyle="#000"; 

     textX = Math.round((width - this.chart.ctx.measureText(this.options.doughnutText).width)/2), 
     textY = height/2; 
     this.chart.ctx.fillText(this.options.doughnutText, textX, textY); 
    } 
    }); 

Как мне сделать это в версии 2+?

https://jsfiddle.net/64106xh8/1/

Answer 1

С 2.1.x, вы можете написать плагин, чтобы сделать этот

---

PreView

---

Сценарий

Chart.pluginService.register({ 
    afterDraw: function (chart) { 
     if (chart.config.options.elements.center) { 
      var helpers = Chart.helpers; 
      var centerX = (chart.chartArea.left + chart.chartArea.right)/2; 
      var centerY = (chart.chartArea.top + chart.chartArea.bottom)/2; 

      var ctx = chart.chart.ctx; 
      ctx.save(); 
      var fontSize = helpers.getValueOrDefault(chart.config.options.elements.center.fontSize, Chart.defaults.global.defaultFontSize); 
      var fontStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontStyle, Chart.defaults.global.defaultFontStyle); 
      var fontFamily = helpers.getValueOrDefault(chart.config.options.elements.center.fontFamily, Chart.defaults.global.defaultFontFamily); 
      var font = helpers.fontString(fontSize, fontStyle, fontFamily); 
      ctx.font = font; 
      ctx.fillStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontColor, Chart.defaults.global.defaultFontColor); 
      ctx.textAlign = 'center'; 
      ctx.textBaseline = 'middle'; 
      ctx.fillText(chart.config.options.elements.center.text, centerX, centerY); 
      ctx.restore(); 
     } 
    }, 
}) 

, а затем

... 
    options: { 
     elements: { 
      center: { 
       text: 'Hello', 
       fontColor: '#000', 
       fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", 
       fontSize: 24, 
       fontStyle: 'normal' 
      } 
     } 
    } 
}; 

---

Fiddle - http://jsfiddle.net/a1r1kszb/