时间戳

首页 > 解决方案 > Chart JS, ng2-Charts - 如何使饼图右侧的标签而不是顶部？

angular - Chart JS, ng2-Charts - 如何使饼图右侧的标签而不是顶部？

问题描述

我正在使用图表 js https://www.npmjs.com/package/chart.js 和ng2-charts https://www.npmjs.com/package/ng2-charts来呈现圆环图。

甜甜圈图

但是，我希望标签出现在甜甜圈图的右侧，知道我该怎么做吗？

  public monthStatsLabel: Label[] = ['Total days', 'Present', 'Leave'];
  public monthStatsData: MultiDataSet = [
    [31,28,2]
  ];
  public monthStatsType: string = 'doughnut';
  public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
    console.log(event, active);
  }

<canvas baseChart
                    [data]="monthStatsData"
                    [labels]="monthStatsLabel"
                    [chartType]="monthStatsType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"></canvas>

标签： angularangularjs-directiveangular-materialchart.jsng2-charts

解决方案

首先，将ChartOptions对象导入您的component.ts：

import { ChartOptions } from 'chart.js';

在您的 : 中使用它创建一个新变量component.ts：

public options: ChartOptions = {
  legend: {
    display: true,
    position: 'right'  // <=========== change this to the position you like.
  },
  title: {
    display: true,
    text: "Employee Details",
  }
  // ... and so on. see below about options
}

现在，在您的 中component.html，将options变量添加到<canvas>：

<canvas baseChart
                [data]="monthStatsData"
                [labels]="monthStatsLabel"
                [chartType]="monthStatsType"
                [options]="options" 
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>

在此处阅读有关 ng2-chart 选项和自定义的更多信息

推荐阅读