如何依据另一数组中的对象名向chartData的plugins添加预定义对象

你当前代码存在几个关键问题：

• 用for...in遍历数组会拿到索引而非数组元素，这不是遍历数组的正确方式；
• 直接将数组里的字符串名称推入plugins，自然无法获取到对应的对象；
• 你期望的plugins格式有误，Chart.js的plugins属性要求是数组类型，而非对象。

正确实现步骤： #

1. 将插件对象统一存入映射表
   把所有定义的插件对象放到一个统一的映射对象中，通过键名（即插件id）快速获取对应对象，避免依赖全局变量：

const pluginMap = {
  dialText: {
    id: 'dialText',
    afterDatasetsDraw(chart, args, options){
        // ... 你的业务逻辑
    }
  },
  gaugeNeedle: {
    id: 'gaugeNeedle',
    afterDatasetsDraw(chart, args, options){
        // ... 你的业务逻辑
    }
  },
  gaugeOutline: {
    id: 'gaugeOutline',
    afterDatasetsDraw(chart, args, options){
        // ... 你的业务逻辑
    }
  }
};

2. 遍历myList并填充plugins数组
   先初始化chartData的plugins为数组，再遍历myList从映射表中取出对应对象添加进去：

var myList = ['dialText', 'gaugeNeedle'];
var chartData = {type:"dot", x:20, y: 30, color:"white"};

// 初始化plugins数组，避免未定义报错
chartData.plugins = chartData.plugins || [];
// 遍历数组添加对应插件对象
myList.forEach(pluginName => {
  const plugin = pluginMap[pluginName];
  if (plugin) { // 可选：判断插件是否存在，避免添加undefined
    chartData.plugins.push(plugin);
  }
});

最终符合Chart.js规范的chartData结构： #

chartData = {
  type:"dot", 
  x:20, 
  y: 30, 
  color:"white",
  plugins: [
    {
      id: 'dialText',
      afterDatasetsDraw(chart, args, options){
        // ...
      }
    },
    {
      id: 'gaugeNeedle',
      afterDatasetsDraw(chart, args, options){
        // ...
      }
    }
  ]
}

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