使用CDN引入ChartJS时条形图legend禁用配置不生效问题

问题根因 #

你使用的options.legend.display是Chart.js v2版本的配置语法，你引入的CDN默认拉取最新的v3/v4版本，自v3开始图例作为内置插件，配置层级调整到了options.plugins.legend下，原有写法自然失效。

解决方法 #

修改你的图表配置项即可，修改后的完整JavaScript代码如下：

var servicelabels = ["January", "February", "March", "April", "May", "June", "July"];
var servicechartData = [65, 0, 80, 81, 56, 85, 40];

barColors = ["#008000","#0000FF","#800080","#00FF00","#FF00FF","#008080","#FFFF00","#808080","#00FFFF","#000080","#800000","#008000","#0000FF","#800080","#00FF00","#FF00FF","#008080","#FFFF00","#808080","#00FFFF","#000080","#800000"];

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
  type: 'bar',
  data: { labels: servicelabels, datasets: [{ data: servicechartData, backgroundColor: barColors}]},
  options: { 
    plugins: {
      legend: {
        display: false 
      }
    }
  }
});

核心改动就是把原来的legend配置移到plugins节点下，不需要改其他逻辑，即可在新版本Chart.js下实现禁用图例的需求。

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