Chart.js legend配置选项不生效，设置display:false无效果求助

问题根因 #

你遇到的图例配置不生效问题是Chart.js版本差异导致的：你参考的教程基于v2.x版本编写，如果你当前引入的是v3.x及以上的新版本，原有配置结构已经不被兼容。
v2版本中legend是options下的一级配置项，从v3版本开始所有内置插件（包含legend、title等）的配置都需要统一放到options.plugins节点下。此外v3版本的字体配置格式也做了调整，原fontSize配置需要改为font.size才会生效。

修正后的配置代码 #

仅需要调整options部分的结构即可，修改后的完整配置如下：

<div class="container">
    <canvas id="myChart"></canvas>
</div>

<script>
    let myChart = document.getElementById('myChart').getContext('2d');
    let colorHex = ['#C0392B', '#884EA0', '#3498DB', '#138D75', '#F4D03F', '#34495E'];
    let labels = ['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedfort']
    let percentages = [617594, 181045, 153060, 106519, 105162, 95072]

    let massPopChart = new Chart(myChart, {
        type:'pie', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
        data:{
            labels: labels,
            datasets:[{
                label: 'Skills',
                data: percentages,
                backgroundColor: colorHex,
                hoverBorderWidth: 2,
                hoverBorderColor: colorHex

            }]
        },
        options:{
          plugins: {
            title: {
              display: true,
              text: 'Largest cities',
              font: {
                size: 25
              }
            },
            legend: {
                display: false,
                position:'bottom'
            }
          }
        }
    });
</script>
</body>

修改后即可正常控制图例的显隐和位置，如需显示图例只需将legend.display改为true即可。

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