角度2 NG2-チャートドーナツ水平線に

Question

を追加これはlink

に関連した質問です私はドーナツグラフ内のテキストを追加するために管理が、私は今、チャート内のテキストを区切る水平線を必要としています。

ngAfterViewInit() { 
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+15); 
     ctx.fillText(chart.config.options.elements.center.text2, centerX, centerY-15); 
     ctx.restore(); 
    } 
    }, 
    }) 
    } 

Answer 1

あなたは...

ctx.beginPath(); 
ctx.moveTo(centerX - chart.innerRadius, centerY); 
ctx.lineTo(centerX + chart.innerRadius, centerY); 
ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'; 
ctx.stroke(); 

と中...

結果のことを最初のテキストを描画した後、次のコードを使用して、グラフ内のテキストを分離する水平線を描くことができますここで

working example on Plunker

です