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

问题描述

嘿伙计们，我遇到了 ng-chartjs 的问题。我正在尝试为每个条形赋予特定的颜色，但它们都采用相同的颜色，并且当我尝试仅提供一种颜色时，颜色根本不是我试图赋予的颜色。

我正在使用ng-chartjs。

我在甜甜圈图中做同样的逻辑，但正在工作。

我想要的颜色

条形字符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,107)',
        'rgb(255,217,65)',
        'rgb(0,187,149)',
        'rgb(0,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,
            drawBorder: false,
          },
        },
      ],
    },
  };

标签： javascriptangularchartsbar-chart

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

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

colors: Array<any> = [
    'rgb(255, 35, 35)',
    'rgb(255,114,114)',
    'rgb(249,181,107)',
    'rgb(238,215,107)',
    'rgb(255,217,65)',
    'rgb(0,187,149)',
    'rgb(0,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's 和hoverBackgroundColor's。

这是一个正在运行的堆栈闪电战，导致了这个视图：

祝你好运！

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

问题描述

解决方案

推荐阅读