Angular 2 ng2-charts甜甜圈添加水平线 [英] Angular 2 ng2-charts donut add horizontal line

问题描述

这是与

这里是 在Plunker上的工作示例

This is question related to link

I managed to add text inside donut chart but I need now horizontal line that separates text inside chart.

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();
    }
  },
    })
  }

解决方案

You can draw a horizontal line which will separate the texts inside chart, using the following code after drawing the first text ...

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

and that results in ...

Here is a working example on Plunker

这篇关于Angular 2 ng2-charts甜甜圈添加水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！