如何修改或移除QuickChart.js进度条的蓝色默认边框？

你在使用quickchart.js创建进度条时，设置背景色后功能正常，但存在无法移除的固定蓝色边框，修改边框颜色也无效，当前配置代码如下：

{
  type: 'progressBar',
  data: {
    datasets: [{
      backgroundColor: '#32cd32',
      data: [50],
      datalabels: {
          font: {
              style: 'Arial',
              size: 18,
          }
      }
    }]
  }
}

解决方案 #

quickchart.js的进度条默认带有边框样式，可通过以下两种方式调整：

• 移除边框：在dataset配置中添加borderWidth: 0，直接消除默认边框
• 修改边框颜色：添加borderColor属性并设置目标颜色值（默认borderWidth为1，无需额外调整）

移除边框的示例配置

{
  type: 'progressBar',
  data: {
    datasets: [{
      backgroundColor: '#32cd32',
      borderWidth: 0, // 移除默认蓝色边框
      data: [50],
      datalabels: {
          font: {
              style: 'Arial',
              size: 18,
          }
      }
    }]
  }
}

修改边框颜色的示例配置

{
  type: 'progressBar',
  data: {
    datasets: [{
      backgroundColor: '#32cd32',
      borderColor: '#ff0000', // 替换为你需要的边框颜色
      data: [50],
      datalabels: {
          font: {
              style: 'Arial',
              size: 18,
          }
      }
    }]
  }
}

说明：quickchart.js的progressBar基于Chart.js扩展，默认边框样式可通过dataset的borderWidth和borderColor属性直接覆盖。

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