角度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