angular - 如何在primeng条形图上自定义数据集

Question

我在一个 Angular 上使用 primeng，我想创建一个条形图，其中最后 2 个水平条的颜色不同。
目前最后两个被包裹并解释为狗和猫
我的问题是，我将如何编辑图形，使狗和猫上的两个橙色条位于老虎和狮子上？
出于某种原因，StackOverflow 不允许我发布图片，因此这里是我将示例上传到的图像托管站点的链接:
https://ibb.co/jZyxddC
组件代码:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-status-logs-graph',
  templateUrl: './status-logs-graph.component.html',
  styleUrls: ['./status-logs-graph.component.scss']
})
export class StatusLogsGraphComponent implements OnInit {

  basicData: any;
  basicOptions: any;

  constructor() { 
      this.basicData = {
    labels: ['dog', 'cat', 'hamster', 'lizard', 'tiger', 'lion'],
    datasets: [
        {
            label: 'Domestic Animals',
            backgroundColor: '#42A5F5',
            data: [ 32, 54, 21, 11]
        },
        {
            label: 'Wild Animals',
            backgroundColor: '#FFA726',
            data: [28, 48]
        }
    ]
};
 }

  ngOnInit(): void {

}
}

Answer 1

Primeng 在底层使用 chartjs。你可以找到它的文档 here .
使用 chartjs，您可以单独定义图表每个条的颜色。如果您将所有动物放在同一个数据集中，然后为每只动物定义颜色，您就会接近想要达到的效果。唯一的缺点是你应该隐藏图例，因为它只会说“家养动物”，因为你只使用了一个数据集。 (你当然可以使用 html/css 创建你自己的图例。)这是一个完整的例子:

var basicData = {
    labels: ['dog', 'cat', 'hamster', 'lizard', 'tiger', 'lion'],
    datasets: [
        {
            data: [ 32, 54, 21, 11, 28, 48],
            backgroundColor: [
                '#42A5F5',
                '#42A5F5',
                '#42A5F5',
                '#42A5F5',
                '#FFA726',
                '#FFA726'
            ]
        }
    ]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: basicData,
    options: {
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>
<canvas id="myChart"></canvas>

现在，这不是很可扩展。更好的方法可能是将所有数据放在一个数组中并动态组合数据集。这样，您始终可以轻松添加动物。看这个例子:

var animals = [
    {
        name: 'dog',
        data: 32,
        type: 'domestic'
    },
    {
        name: 'cat',
        data: 54,
        type: 'domestic'
    },
    {
        name: 'hamster',
        data: 21,
        type: 'domestic'
    },
    {
        name: 'lizard',
        data: 11,
        type: 'domestic'
    },
    {
        name: 'tiger',
        data: 28,
        type: 'wild'
    },
    {
        name: 'lion',
        data: 48,
        type: 'wild'
    }
];
var labels = [];
var data = [];
var colors = [];
for(var i = 0; i < animals.length; i++){
    labels.push(animals[i].name);
    data.push(animals[i].data);
    if(animals[i].type === 'domestic'){
        colors.push('#42A5F5');
    }
    else{
        colors.push('#FFA726');
    }
}
var basicData = {
    labels:labels,
    datasets: [
        {
            data: data,
            backgroundColor: colors
        }
    ]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: basicData,
    options: {
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>
<canvas id="myChart"></canvas>