css 更改条形图上数据标签的字体颜色- chartsjs-plugin-data-labels

eit6fx6z  于 2022-11-19  发布在  其他
关注(0)|答案(2)|浏览(105)

我有下面的条形图。下面是它的javascript选项:

public chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: true,
      labels: {
        fontColor: "black",
        fontSize: 12,
      },
    },
    scales: {
      yAxes: [
        {
          display: true,
          stacked: false,
          scaleLabel: {
            display: true,
            labelString: "Number of Students",
          },
          ticks: {
            stepSize: 5,
            min: 0,
            max: 30,
            fontSize: 12,
            fontColor: "black",
          },
        },
      ],
      xAxes: [
        {
          display: true,
          stacked: false,
          ticks: {
            fontSize: 12,
            fontColor: "black",
            precision: 0,
          },
        },
      ],
    },
  };

下面是html:

<canvas
            baseChart
            [datasets]="chartData"
            [labels]="chartLabels"
            [options]="chartOptions"
            [colors]="chartColors"
            [plugins]="[]"
            [legend]="true"
            [chartType]="'bar'"
            height="300px"
          >
          </canvas>

有时数据标签会出现在条形图上(见图),但我不知道如何改变颜色使它们变成白色。有人知道吗?

最新消息:
下面是使用新chartOptions的图表,但数据标签的颜色仍然不变:

chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: true,
    },
    scales: {
      yAxes: [
        {
          display: true,
          stacked: false,
          scaleLabel: {
            display: true,
            labelString: "Number of Students",
          },
          ticks: {
            stepSize: 5,
            min: 0,
            max: 30,
            fontSize: 12,
            fontColor: "black",
          },
        },
      ],
      xAxes: [
        {
          display: true,
          stacked: false,
          ticks: {
            fontSize: 12,
            fontColor: "black",
            precision: 0,
          },
        },
      ],
    },
    plugins: {
      labels: {
        fontColor: "white",
        fontSize: 12,
      },
    },
  };
cgyqldqp

cgyqldqp1#

我认为这个问题是因为你在图例配置中添加了baels插件配置。
它应该是:

options: {
  ...
    plugins: {
      labels: {
        fontColor: "black",
        fontSize: 12,
      },
    }
  ...
  }
hfyxw5xn

hfyxw5xn2#

这个问题是由于我的“chartsjs-plugin-data-labels”插件造成的。通过将这个插件添加到数据集数组中修复了这个问题。

dataLabels: {
          colors: ["white"],
        },

相关问题