ChartJS 图表JS,ng 2-图表-如何使标签的饼图,而不是在顶部的权利?

vc9ivgsu  于 2022-11-06  发布在  Chart.js
关注(0)|答案(3)|浏览(177)

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

但是,我希望标 checkout 现在圆环图的右侧,您知道如何做到这一点吗?
第一个

uyto3xhc

uyto3xhc1#

首先,在component.ts中导入ChartOptions对象:

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>

Read more about ng2-chart options and customization here

uqjltbpv

uqjltbpv2#

我对ng 2-Charts一无所知,但你可能需要添加一些东西

[options] = "chartOptions"

到你的基础图表

public chartOptions: legend = {
    position: 'right'
  };
2jcobegt

2jcobegt3#

对于最新的ng2-charts(v4.0.1)和chart.js,您需要使用以下代码:

public options: ChartOptions<'pie'> = {
  plugins: {
    legend: {
      position: 'doughnut'
    },
  }
};

请注意,legend位于plugins之下。这可以在官方文档中找到:

具体而言,本部分:
命名空间:options.plugins.legend,图表图例的全局选项在Chart.defaults.plugins.legend中定义。
不要忘记更新模板:

<canvas baseChart
        ...
        [options]="options">
</canvas>

我刚和Angular 14一起用的

相关问题