在饼图或圆环图外部放置数据标签- Chart.js

w1jd8yoj 于 2023-02-19 发布在 Chart.js

关注(0)|答案(1)|浏览(275)

我正在处理一个大规模的应用程序，将标签放置在饼图或圆环图之外的图表本身将非常有帮助。
This plugin, outerLabels is exactly what I am looking for，但我有麻烦让它输出任何东西。
我一直无法找到一种方法来完成这一点使用chartiderjs，这就是我坚持工作的现在。
我已经导入了import {} from 'chartjs-plugin-outerlabels';和import 'chartjs-plugin-outerlabels';一样的插件
下面是如何设置图表选项的示例：

function getPieChartOptions(chartTitle: string) {
    const options: ChartOptions = {
        responsive: true,
        plugins: {
            outerLabels: {
                fontNormalSize: 12,
                fontNormalFamily: 'sans-serif',
            },
            legend: {
                display: true,
                labels: {
                    usePointStyle: true,
                    font: {
                        family: 'sans-serif',
                        size: 12,
                    }
                }
            },
            title: {
                display: true,
                text: chartTitle,
                color: 'black',
                padding: 5,
                font: {
                    size: 16,
                    family: 'sans-serif',
                }
            },
            datalabels: {
                color: 'white',
                formatter: commas.format,
            }
        },
    };
    return options;
}

以下是项目本身中的圆环图示例：

如果任何人可以帮助得到这个插件的工作，或有其他解决这个问题的方法，这将是非常感谢！

chart.js

来源：https://stackoverflow.com/questions/75475804/placing-data-labels-outside-pie-or-doughnut-chart-chart-js

1条答案

按热度按时间

nkoocmlb1#

这对我来说没有datalabels字段也行（因为它需要安装chartjs-plugin-datalabels.js库）。
基本上，ChartOptions设置与您提供的设置类似。

import 'chartjs-plugin-outerlabels';

getPieChartOptions(chartTitle: string) {
  const options: ChartOptions<'doughnut'> = {
    responsive: true,
    plugins: {
      outerLabels: {
        fontNormalSize: 12,
        fontNormalFamily: 'sans-serif',
      },
      legend: {
        display: true,
        labels: {
          usePointStyle: true,
          font: {
            family: 'sans-serif',
            size: 12,
          },
        },
      },
      title: {
        display: true,
        text: chartTitle,
        color: 'black',
        padding: 5,
        font: {
          size: 16,
          family: 'sans-serif',
        },
      },
      tooltip: {
        enabled: false,
      },
    },
  };
  return options;
}

这就是如何将图表呈现给canvas元素。

@ViewChild('MyChart', { static: true }) chart: ElementRef<HTMLCanvasElement>;

ngAfterViewInit() {
  const ctx = this.chart.nativeElement.getContext('2d');
  new Chart<'doughnut'>(ctx, {
    type: 'doughnut',
    data: {
      labels: [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'],
      datasets: [
        {
          data: [300, 500, 100],
        },
      ],
    },
    options: this.getPieChartOptions('doughnut'),
  } as ChartConfiguration<'doughnut'>).draw;
}

Demo @ StackBlitz

赞(0）回复(0）举报 2023-02-19

我来回答

在饼图或圆环图外部放置数据标签- Chart.js

1条答案

相关问题

热门标签

最新问答