Angular ng2-charts chartjs-plugin-labels 选项不起作用答案

【问题标题】：Angular ng2-charts chartsjs-plugin-labels options not workingAngular ng2-charts chartjs-plugin-labels 选项不起作用
【发布时间】：2020-10-10 21:22:52
【问题描述】：

我正在使用 Angular (v9)、ng2-charts、chart.js (v2.9) 和 chartjs-plugin-datalabels

我的图表显示带有标签，太棒了。现在我想使用一些选项来为标签着色并定位它们。

我正在像这样导入标签：

import * as pluginDataLabels from 'chartjs-plugin-datalabels';

这工作正常：

public barChartOptions = {
  maintainAspectRatio: false,
  scaleShowVerticalLines: false,
  responsive: true,
  plugins: {
    pluginDataLabels
  }

这不是：

public barChartOptions = {
    maintainAspectRatio: false,
    scaleShowVerticalLines: false,
    responsive: true,
    plugins: {
      pluginDataLabels: {
        color: 'blue'
      }
    }

非常感谢您对此的任何帮助。当我尝试添加任何选项时，标签就会消失。

【问题讨论】：

你有没有尝试过这样的事情：plugins: { pluginDataLabels: {... pluginDataLabels, color: 'blue' } }
感谢您的建议，这并没有解决问题。

标签： angular chart.js

【解决方案1】：

根据docs，插件进入plugins数组。插件选项进入插件 ID 下的 options.plugins 对象。根据docs，这似乎是datalabels。

public barChartOptions = {
  maintainAspectRatio: false,
  scaleShowVerticalLines: false,
  responsive: true,
  plugins: [pluginDataLabels],
  options: {
    plugins: {
      datalabels: {color: 'blue'}
    }
  }
};

【讨论】：

宾果游戏。尽管标签显示在我的选项数组中调用它，但要访问标签选项，必须在其自己的插件数组中调用插件。杰夫，非常感谢您的帮助。干杯！

【解决方案2】：

您需要定义选项plugins.labels.fontColor 以获得所需的结果。

public barChartOptions = {
  ...
  plugins: {
    labels: {
      fontColor: 'blue'
    }
  }

来自chartjs-plugin-labels 文档：

fontColor：字体颜色，可以是每个数据的颜色数组，也可以是动态颜色的函数。

因此，如果您需要为不同的数据值使用不同的标签颜色，fontColor也可以定义如下：

public barChartOptions = {
  ...
  plugins: {
    labels: {
      fontColor: ['blue', 'red', 'green']
    }
  }

【讨论】：