Angular 2 ng2-charts donut add horizontal line

家住魔仙堡 提交于 2019-12-24 07:03:36

问题


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

回答1:


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



来源:https://stackoverflow.com/questions/43717079/angular-2-ng2-charts-donut-add-horizontal-line

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!