内联的插件不工作

Question

根据该Chart.js docs，下面的代码应工作：

new Chart(document.getElementById(chartID), { 
    type: 'pie', 
    responsive: true, 
    maintainAspectRatio: false, 
    data: { 
     labels: graph.globals.labels, 
     datasets: [{ 
     backgroundColor: pieOptions.backgrounds, 
     data: pieOptions.objToArr(graph.meetingsData), 
     hoverBorderWidth: 5, 
     borderColor: 'transparent', 
     }] 
    }, 
    options: { 
     title: { 
     display: true, 
     text: graph.globals.title, 
     }, 
     legend: { 
     display: true, 
     position: 'bottom', 
     fullWidth: false, 
     onClick:() => {}, 
     labels: { 
      generateLabels: (chart) => { 
       return pieOptions.legendLeft(chart); 
      } 
     } 
     }, 
     plugins: [{ 
     beforeInit: function(chart, options) { 
      console.log('yolo'); 
     } 
     }] 
     rotation: 3.9, 
    } 
}); 

然而，当我使用可变创建插件，或内联创建它如上所示，这不记录任何东西我可以使用插件的唯一方法是在全球范围内注册。

有人可以向我解释为什么它不起作用吗？

Answer 1

plugins应该放置在它自己的配置部分，而不是嵌套在options下。

相反的：

options: { 
    title: { 
     display: true, 
     text: graph.globals.title, 
    }, 
    legend: { 
     display: true, 
     position: 'bottom', 
     fullWidth: false, 
     onClick:() => {}, 
     labels: { 
      generateLabels: (chart) => { 
       return pieOptions.legendLeft(chart); 
      } 
     } 
    }, 
    plugins: [{ 
     beforeInit: function(chart, options) { 
      console.log('yolo'); 
     } 
    }] 
    rotation: 3.9, 
} 

您的代码应该是这样的：

options: { 
    title: { 
     display: true, 
     text: graph.globals.title, 
    }, 
    legend: { 
     display: true, 
     position: 'bottom', 
     fullWidth: false, 
     onClick:() => {}, 
     labels: { 
     // generateLabels: (chart) => { 
     //  return pieOptions.legendLeft(chart); 
     // } 
     } 
    }, 
    rotation: 3.9, 
}, 
plugins: [{ 
    beforeInit: function(chart, options) { 
     console.log('yolo'); 
    } 
}] 

工作的jsfiddle：https://jsfiddle.net/r1x63b8v/