Chart.js 3.9.1中使用chartjs-plugin-colorschemes设置主题失败求助

你的代码无法生效有两个核心原因：

• 使用的chartjs-plugin-colorschemes版本（0.4.0）不兼容Chart.js 3.x版本
• Chart.js 3.x的插件配置结构和v2完全不同，你沿用了v2的配置方式

修复步骤 #

1. 更换兼容的插件版本 #

0.4.0版本仅支持Chart.js v2，需要升级到支持v3的版本（比如0.5.0及以上），替换你的插件引入脚本：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-colorschemes/0.5.0/chartjs-plugin-colorschemes.min.js"></script>

2. 调整插件配置结构 #

Chart.js 3.x中，插件配置不再放在options.plugins数组中，而是直接在配置对象的顶级plugins属性中定义。正确的配置方式如下：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="chartMenu">
        <p>WWW.CHARTJS3.COM (Chart JS 3.9.1)</p>
    </div>
    <div class="chartCard">
        <div class="chartBox" style="width: 500px">
            <canvas id="myChart"></canvas>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-colorschemes/0.5.0/chartjs-plugin-colorschemes.min.js"></script>

    <script>
        const data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [1, 2, 3].map(function (i) {
                return {
                    label: 'Dataset ' + i,
                    data: [0, 0, 0, 0, 0, 0, 0].map(Math.random),
                    fill: false
                }
            })
        };

        const config = {
            type: 'line',
            data,
            // 顶级plugins属性配置colorschemes
            plugins: {
                colorschemes: {
                    scheme: 'brewer.RdYlBu3'
                }
            }
        };

        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>

</body>

</html>

关键说明 #

• Chart.js 3.x重构了插件系统，废弃了v2中options.plugins数组的配置方式，改为对象形式配置插件
• 确保插件版本与Chart.js主版本匹配，避免API不兼容问题

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