PrimeNG Chart如何移除标签旁的颜色方块？

PrimeNG Chart基于Chart.js实现，你可以通过配置chartOptions修改图例旁的标记样式，同时保留标题和柱子原有样式，具体两种方案如下：

方案1：移除图例旁的橙色方块 #

通过设置图例标签的boxWidth为0，让标记方块直接消失：

// 原有chartData保持不变
this.chartData = {
  labels: [1, 2, 3, 4, 5, 6],
  datasets: [
    {
      label: 'CHARTS TITLE - HOW TO REMOVE THE ORANGE BLOCK HERE?',
      backgroundColor: ['#FF9900', '#FF3300', '#DDDDDD', '#474747', '#777777', '#CC3300'],
      data: [29, 29, 26, 11, 18, 12]
    }
  ]
};

// 添加chartOptions配置
this.chartOptions = {
  legend: {
    labels: {
      boxWidth: 0 // 将图例标记宽度设为0，隐藏方块
    }
  }
};

模板中绑定配置：

<p-chart type="bar" [data]="chartData" [options]="chartOptions"></p-chart>

方案2：将橙色方块改为白色 #

如果要保留方块形态但改为白色，可通过自定义图例标签生成函数修改标记颜色：

this.chartOptions = {
  legend: {
    labels: {
      generateLabels: (chart) => {
        const originalLabels = chart.defaults.legend.labels.generateLabels(chart);
        // 修改第一个图例的标记填充色为白色
        originalLabels[0].fillStyle = '#FFFFFF';
        return originalLabels;
      }
    }
  }
};

以上两种方案都不会改变图表柱子的原有样式，同时保留标题文本。

内容的提问来源于stack exchange，提问作者Katy