angular - Angular 10 中的 Chart.js：指定颜色未显示在多系列条形图中（而不是随机颜色）

Question

我正在尝试实现堆叠条形图（水平，响应式）。

我在Angular 10中使用Chart.js。

它应该具有以下 3 系列的特定颜色（显示为顶部图例中的标签）：

• 绿色为Both data,
• 黄色代表Only data和
• 红色为No data

问题

但是，除了在barchartColors.

实际输出

这是生成图表的屏幕截图：

打字稿

public barChartOptions: any = {
  scaleShowVerticalLines: false,
  responsive: true
};

public barChartLabels: string[] = ['Dept1', 'Dept2', 'Dept3', 'Dept4', 'Dept5', 'Dept6'];
public barChartType = 'horizontalBar';
public barChartLegend = true;


public barChartData: any[] = [
  {data: [0, 16,4, 3, 10, 0], label: 'Both data'},
  {data: [0, 5, 0,5, 8, 0], label: 'Only data'},
  {data: [41, 6, 6,0, 48, 12], label: 'No Data'}
];

public barchartColors=[
  {backgroundColor: [
    'rgba(92, 184, 92,1)',  //green
    'rgba(255, 193, 7,1)',  //yellow
    'rgba(217, 83, 79,1)',  //red
  ]}
];

HTML

<div class="card">

  <div class="card-header">
    Data Availability Department Wise
    <div class="card-header-actions">
      <a href="http://www.chartjs.org"><small class="text-muted">View</small></a>
    </div>
  </div>
  
  <div class="card-body">
    <div class="chart-wrapper">      
       <canvas baseChart class="chart" id ="data"
         [datasets]="barChartData"
         [labels]="barChartLabels"
         [options]="barChartOptions"
         [legend]="barChartLegend"
         [colors]="barchartColors"
         [chartType]="barChartType"
       ></canvas>
    </div>
  </div>

</div>

标签： angulartypescriptchart.jsbar-chart

Answer 1

视觉和色彩测试报告

显示了数据系列的 3 种背景颜色，但在顶部的图例中与标签一起显示。

据我所见，它们以barchartColors. 请参阅我的描述和添加到您的颜色规范评论的链接：

'rgba(92, 184, 92 ,1)', //green: 给出其他 #5cb8ff颜色描述：浅蓝色

'rgba(255, 193, 7 ,1)', //yellow: 给出#ffc107颜色描述：鲜艳的黄色

'rgba(217, 83, 79 ,1)', //red: 给出#d9534f颜色描述：柔和的红色

与生成图表中给定的屏幕截图进行比较：

然而：

• 在图例中：它们是混合的，没有正确分配给标签
• 在图表中，在条形图上：它们未正确分配给系列

{data: [0, 16,4, 3, 10, 0], label: 'Both data'}, // 预期为蓝色（绿色）但随机

{data: [0, 5, 0,5, 8, 0], label: 'Only data'}, // 预期为黄色但随机

{data: [41, 6, 6,0, 48, 12], label: 'No Data'} // 预期为红色，但随机

如何为条形数据集着色

Chart.js文档中的研究，条形图的数据集属性显示，应该为每个数据集提供颜色：

data.datasets[index]- 仅适用于该数据集的选项

您的数据集是3 个系列（在 JS 或 TypeScipt 中定义为数组的 3 个元素）。它们被定义为barChartData具有 3 个元素的数组或 JavaScript 对象。data每个数据集（对象）都由诸如, ..之类的属性定义，label但目前缺少颜色规范。

backgroundColor因此，您可以像这样在每个对象中（而不是在单独的数组中！）中为每个数据集定义所需的：

解决方案

打字稿：

public barChartData: any[] = [
  {
    data: [0, 16,4, 3, 10, 0], 
    label: 'Both data',
    backgroundColor: '#5cb8ff' // LightBlue (intended: green)
  },
  {
    data: [0, 5, 0,5, 8, 0],
    label: 'Only data',
    backgroundColor: '#ffc107' // VividYellow (intended: yellow)

  },
  {
    data: [41, 6, 6,0, 48, 12],
    label: 'No Data',
    backgroundColor: '#d9534f' // SoftRed (intended: red)
  }
];

笔记：

我使用十六进制颜色符号字符串（如'#d9534f'）作为规范格式。这是由Chart.js的Colors文档提供的：

您可以将颜色指定为十六进制、RGB 或 HSL 表示法的字符串。

同一段还解释了为什么您未指定（正确）数据集的颜色会导致明显随机的颜色。它们是默认定义的：

如果需要颜色但未指定，Chart.js 将使用全局默认颜色。

然后color从您的 HTML 中删除 Angular 绑定：

       <canvas baseChart class="chart" id ="data"
         [datasets]="barChartData"
         [labels]="barChartLabels"
         [options]="barChartOptions"
         [legend]="barChartLegend"

         [chartType]="barChartType"
       ></canvas>

演示

我在纯 JavaScript 中使用Chart.js版本3.1.1来测试它。它工作并显示了指定的颜色：

Goodie：甚至设法添加了可以改变工具提示外观的插件（背景颜色、标签的文本颜色）。

试试这个小提琴中的现场演示。

进一步阅读

• OrdinaryCoders博客教程（2020）：如何使用 Chart.js | 11 个 Chart.js 示例

  “Chart.js 条形图示例”部分以条形图示例说明了数据集的配置。

• Bartosz Gajda博客教程（2020 年）：使用 Angular 和 Chart.js 构建实时图表

  它展示了如何使用Ng2-Charts将Chart.js与Angular集成。那里使用的package.json取决于以下版本：

  "chart.js": "^2.9.3",
  "ng2-charts": "^2.3.0",