Chart.js autocolors插件按数据集配色功能异常问题

你代码里的核心问题是未注册autocolors插件——Chart.js 3.x版本不再自动注册外部插件，必须手动完成注册步骤，否则插件根本不会生效，自然无法给不同数据集分配颜色。

两种修复方式： #

• 全局注册插件：适合所有图表都需要使用该插件的场景，在引入插件后添加注册代码：

  Chart.register(autocolors);
  

• 实例级注册插件：仅让当前图表使用该插件，在创建Chart实例时通过plugins选项指定：

  new Chart(ctx, {
    type: 'line',
    data: { /* 你的数据 */ },
    options: { /* 你的配置 */ },
    plugins: [autocolors] // 新增这行
  });
  

修复后的完整代码 #

JavaScript代码：

const autocolors = window['chartjs-plugin-autocolors'];
// 全局注册插件（二选一即可）
Chart.register(autocolors);

var options = {
  type: 'line',
  data: {
    labels: ["0", "1", "2", "3", "4", "5"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3]
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7]
      },
      {
        label: '# of People',
        data: [3, 1, 15, 4, 9, 12]
      }
    ]
  },
  options: {
    plugins: {
      autocolors: {
         mode: 'dataset'
      }
    }
  },
  // 如果用实例注册，就加这行（替换全局注册）
  // plugins: [autocolors]
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

HTML代码：

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>
</body>

修复后，autocolors插件会按照mode: 'dataset'的配置，为每个数据集自动分配不同的颜色，问题即可解决。

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