Chart.js如何为多数据集设置同分类背景色并自定义柱状图标签位置

完整修改后代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
<canvas width="800" height="400" id="chart"></canvas>

document.addEventListener('DOMContentLoaded', function () {
  // 预定义每个分类对应的颜色
  const categoryColors = ['red', 'blue', 'green', 'purple', 'orange', 'gray'];
  const options = {
    "type":"bar",
    "data":{
      "labels":[
        "10/25/2021",
        "11/1/2021",
        "11/8/2021",
        "11/15/2021"
      ],
      "datasets":[
        {
          "label":"Category 1",
          "data":[
            {"x":"11/1/2021","y":3.25},
            {"x":"11/8/2021","y":3.66},
            {"x":"11/15/2021","y":4.00}
          ],
          "borderWidth":0,
          "backgroundColor": categoryColors[0]
        },
        {
          "label":"Category 2",
          "data":[
            {"x":"11/1/2021","y":3.00},
            {"x":"11/8/2021","y":4.00},
            {"x":"11/15/2021","y":5.00}
          ],
          "borderWidth":0,
          "backgroundColor": categoryColors[1]
        },
        {
          "label":"Category 3",
          "data":[
            {"x":"11/1/2021","y":2.00},
            {"x":"11/8/2021","y":4.33},
            {"x":"11/15/2021","y":5.00}
          ],
          "borderWidth":0,
          "backgroundColor": categoryColors[2]
        },
        {
          "label":"Category 4",
          "data":[
            {"x":"11/1/2021","y":3.25},
            {"x":"11/8/2021","y":4.33},
            {"x":"11/15/2021","y":4.00}
          ],
          "borderWidth":0,
          "backgroundColor": categoryColors[3]
        },
        {
          "label":"Category 5",
          "data":[
            {"x":"11/1/2021","y":3.25},
            {"x":"11/8/2021","y":4.00},
            {"x":"11/15/2021","y":5.00}
          ],
          "borderWidth":0,
          "backgroundColor": categoryColors[4]
        },
        {
          "label":"Category 6",
          "data":[
            {"x":"11/1/2021","y":3.00},
            {"x":"11/8/2021","y":4.66},
            {"x":"11/15/2021","y":4.00}
          ],
          "borderWidth":0,
          "backgroundColor": categoryColors[5]
        }
      ]
    },
    "options":{
      "responsive":false,
      "plugins":{
        "legend":{
          "position":"top"
        },
        "title":{
          "display":true,
          "text":"Category Overview"
        }
      },
      "scales": {
        "x": {
          "position": "bottom",
          "grid": {
            "offset": true
          }
        },
        "x-category": {
          "position": "bottom",
          "offset": true,
          "grid": {
            "drawOnChartArea": false,
          },
          "ticks": {
            "callback": function(value, index) {
              return `Category ${(index % 6) + 1}`;
            },
            "maxRotation": 0
          }
        },
        "y": {
          "beginAtZero": true
        }
      }
    }
  };
  let canvas = document.getElementById('chart');
  new Chart(canvas.getContext('2d'), options);
});

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