首页 > 解决方案 > 如何为条形图primiNg数据集中的每个颜色条设置不同的标签

问题描述

我正在研究 PrimeNg 条形图我在根据条形的不同背景颜色设置数据集标签时遇到问题。我只有一个数据集,但每个颜色条代表不同的数据,那么如何为 PrimeNg 条形图中的每个颜色条设置不同的标签,我们可以使用自己的 html 自定义图例以根据颜色设置标签吗?

  this.basicData = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First dataset', (<- wanted to update this label with like [Data1,Data2,Dat3....]
      backgroundColor: [
        '#EC407A',
        '#AB47BC',
        '#42A5F5',
        '#7E57C2',
        '#66BB6A',
        '#FFCA28',
        '#26A69A'
      ],
      data: [65, 59, 80, 81, 56, 55, 15]
    }
  ]
};
this.chartOptions = {
  plugins: {
    legend: {
      labels: {
        color: '#ebedef'
      }
    }
  },
  scales: {
    x: {
      ticks: {
        color: '#ebedef'
      },
      grid: {
        color: 'rgba(255,255,255,0.2)'
      }
    },
    y: {
      ticks: {
        color: '#ebedef'
      },
      grid: {
        color: 'rgba(255,255,255,0.2)'
      }
    }
  }
};
HTML CODE:
            <div class="card ">
              <h5>Month Vs Data</h5>
              <p-chart type="bar" [data]="basicData" [options]="chartOptions"></p-chart>
            </div>

想要更新每个颜色条的数据集标签

标签: angularchartschart.jsbar-chartprimeng

解决方案


推荐阅读