如何修改Chart.js柱状图的柱体颜色

要改柱状图的柱体颜色，直接在图表配置的datasets对象里添加对应的颜色属性就行，两种常用方式：

1. 统一设置所有柱体颜色 #

给datasets添加backgroundColor（柱体填充色）和borderColor（柱体边框色），所有柱子会使用同一种颜色：

<main>
    <div class="content">
        <h1>Results</h1>
        <h2>Trial 1</h2>
        <div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
        <h2>Trial 2</h2>
        <div class="results" id="trial-2"> <canvas class="show-results"></canvas></div>
        <h2>Trial 3</h2>
        <div class="results" id="trial-3"> <canvas class="show-results"></canvas></div>
        <h2>Trial 4</h2>
        <div class="results" id="trial-4"> <canvas class="show-results"></canvas></div>
        <h2>Trial 5</h2>
        <div class="results" id="trial-5"> <canvas class="show-results"></canvas></div>
        <h2>Results Overall</h2>
        <div class="results" id="trial-overall"> <canvas class="show-results"></canvas></div>
    </div>
</main>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementsByClassName("show-results");
  for (let i = 0; i < ctx.length; i++) {
    new Chart(ctx[i], {
      type: 'bar',
      data: {
        labels: ['Lua', 'Python', 'JavaScript', 'Java', 'C', 'C++', 'F#', 'Haskell', 'C#', 'Rust', 'Go'],
        datasets: [{
          label: 'Time to compile and run',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1,
          // 添加颜色配置
          backgroundColor: '#36A2EB',
          borderColor: '#999'
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
}
  </script>

2. 给每个柱体单独设置颜色 #

把backgroundColor和borderColor设为数组，数组元素顺序对应data里的数值顺序，每个柱子会使用对应位置的颜色：

datasets: [{
  label: 'Time to compile and run',
  data: [12, 19, 3, 5, 2, 3],
  borderWidth: 1,
  backgroundColor: [
    '#FF6384',
    '#36A2EB',
    '#FFCE56',
    '#4BC0C0',
    '#9966FF',
    '#FF9F40'
  ],
  borderColor: [
    '#FF6384',
    '#36A2EB',
    '#FFCE56',
    '#4BC0C0',
    '#9966FF',
    '#FF9F40'
  ]
}]

另外提一句：你代码里所有results容器的id都是trial-1，这不符合HTML规范（id必须唯一），示例里已经改成了不同的id，建议你同步修正。

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