Angular 2 ng2-charts 甜甜圈添加水平线答案

【问题标题】：Angular 2 ng2-charts donut add horizontal lineAngular 2 ng2-charts 甜甜圈添加水平线
【发布时间】：2017-05-01 18:22:57
【问题描述】：

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

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案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

【讨论】：

谢谢！，我还发现这个也可以工作 ctx.fillStyle = "#FF0000"; ctx.fillRect(20, 20, 150, 1);