NgChartjs条形图条形颜色在Angular中不起作用

问题描述

大家好，我遇到ng-chartjs问题。我正在尝试为每个条赋予特定的颜色，但是它们都采用相同的颜色，并且该颜色根本不是我尝试仅提供一种颜色时要尝试提供的颜色。

我正在使用ng-chartjs。

我在甜甜圈图中执行相同的逻辑，但是正在工作。

Actual Bar chart

我要怎样的颜色

Desired Bar chart

条形字符HTML代码

    <div>
      <div>
        <canvas
          ngChartjs
          [datasets]="lineChartData"
          [labels]="lineChartLabels"
          [options]="lineChartOptions"
          [legend]="true"
          [chartType]="chartType"
        ></canvas>
      </div>
    </div>

Ts条形图代码

  chartType = 'bar';
 
  lineChartData: Array<any> = [
    {
      label: 'Student',fill: false,lineTension: 0.1,backgroundColor: [
        'rgb(255,35,35)','rgb(255,114,114)','rgb(249,181,107)','rgb(238,215,217,65)','rgb(0,187,149)',228,189)','rgb(107,238,212)',],borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBorderWidth: 2,poinTradius: 1,pointHiTradius: 10,data: [12,12,10,22,15,20,25,30],barPercentage: 0.11,},];
 
  lineChartLabels: Array<any> = [
    '0 pike','15 pike','30 pike','45 pike','60 pike','75 pike','90 pike','100 pike',];

  
  lineChartOptions: any = {
    responsive: true,chartArea: {
      backgroundColor: 'white',title: {
      display: true,position: 'top',legend: {
      
      display: false,layout: {
      padding: 50,scales: {
      yAxes: [
        {
          gridLines: {
            borderDash: [10],color: 'rgb(23,6,100)',drawBorder: false,ticks: {
           
            beginAtZero: true,stepSize: 10,xAxes: [
        {
          gridLines: {
           
            display: false,};

解决方法

您可以使用指令的[color]设置颜色，如下所示。

将此添加到您的bar-chart.ts：

colors: Array<any> = [
    'rgb(255,35,35)','rgb(255,114,114)','rgb(249,181,107)','rgb(238,215,217,65)','rgb(0,187,149)',228,189)','rgb(107,238,212)'
]

并按如下所示修改您的bar-chart.html：

<div>
  <div>
    <canvas
      ngChartjs
      [datasets]="lineChartData"
      [labels]="lineChartLabels"
      [options]="lineChartOptions"
      [colors]="[{ backgroundColor: colors,hoverBackgroundColor: colors }]"
      [legend]="true"
      [chartType]="chartType"
    ></canvas>
  </div>
</div>

您都可以设置backgroundColor和hoverBackgroundColor。

以下是产生此视图的running stackblitz：

祝你好运！