Angular 2 ng2-charts甜甜圈添加文本 [英] Angular 2 ng2-charts donut add text

问题描述

我正在根据chart.js使用 ng2-charts 。我正在尝试在甜甜圈图的中间添加文本，但无法设置文本或注册插件。有人可以帮忙吗？到目前为止，我发现了一些如何在javascript中执行此操作的不完整答案，但是我正在为chart.js的angular 2和打字稿实现而苦苦挣扎。

I am using ng2-charts based on chart.js. I am trying to add text in the middle of donut chart but I am not able to set text or register plugin. Can anyone help? So far I found several incomplete answers how to do this in javascript but I am struggling with angular 2 and typescript implementation of chart.js.

我的模板文件：

    <div style="display: block" class="donut">
  <canvas #mycanvas baseChart
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [chartType]="doughnutChartType"
          [options]="doughnutChartOptions"
          [datasets]="doughnutChartDatasets"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
</div>
<script>
  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);
        ctx.restore();
      }
    },
  })
</script>

和ts文件：app.component.ts

and ts file: app.component.ts

 import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  colors = {
    indigo: '#14143e',
    pink: '#fd1c49',
    orange: '#ff6e00',
    yellow: '#f0c800',
    mint: '#00efab',
    cyan: '#05d1ff',
    purple: '#841386',
    white: '#fff'
  };


  // Doughnut
  public doughnutChartLabels:string[] = ['Drive Score', ''];
  public doughnutChartData:number[] = [85, 15];
  public doughnutChartType:string = 'doughnut';

  public doughnutChartOptions: any = {
    cutoutPercentage: 80,
    elements: {
      center: {
        text: 'Hello',
        fontColor: '#000',
        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
        fontSize: 24,
        fontStyle: 'normal'
      }
    }
  };
  public doughnutChartDatasets: any[] = [
    {
      data: [300, 50, 100],
      options: this.doughnutChartOptions,
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }];

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

  constructor(){

  }




}

推荐答案

将代码复制到Plunker，效果很好：

Copied your code to a Plunker, works just fine:

插件： https ：//plnkr.co/edit/UGH3BKiWmgFqFWf78ZUE？p = preview

我认为以这种方式添加脚本不起作用，因为有角度会对其进行消毒。尝试将脚本添加到页面上Chart.js脚本之后的< script> 或最好是它自己的文件中。

I think that adding the script this way will not work because angular would sanitize it. Try adding the script after the chart.js script on your page in <script> or preferably in it's own file.

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