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 。

＆＃xA;＆＃xA;

而不是：

＆＃xA;＆＃xA;

 选项：{＆＃xA;标题：{＆＃xA; display：true，＆＃xA; text：graph.globals.title，＆＃xA; }，＆＃XA;传说：{＆＃xA; display：true，＆＃xA;位置：'底部'，＆＃xA; fullWidth：false，＆＃xA; onClick :(）=＆gt; {}，＆＃XA;标签：{＆＃xA; generateLabels :( chart）=＆gt; {＆＃XA; return pieOptions.legendLeft（chart）;＆＃xA; }＆＃XA; }＆＃XA; }，＆＃XA;插件：[{＆＃xA; beforeInit：function（chart，options）{＆＃xA;的console.log（ 'YOLO'）;＆＃XA; }＆＃XA; }]＆＃XA;轮换：3.9，＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

您的代码应如下所示：

＆＃xA;＆＃xA;

 选项：{＆＃xA;标题：{＆＃xA; display：true，＆＃xA; text：graph.globals.title，＆＃xA; }，＆＃XA;传说：{＆＃xA; display：true，＆＃xA;位置：'底部'，＆＃xA; fullWidth：false，＆＃xA; onClick :(）=＆gt; {}，＆＃XA;标签：{＆＃xA; // generateLabels :( chart）=＆gt; {＆＃XA; // return pieOptions.legendLeft（chart）;＆＃xA; //}＆＃xA; }＆＃XA; }，＆＃XA;轮换：3.9，＆＃xA;}，＆＃xA;插件：[{＆＃xA; beforeInit：function（chart，options）{＆＃xA;的console.log（ 'YOLO'）;＆＃XA; }＆＃xA;}]＆＃xA;

＆＃xA;＆＃xA;

使用JSFiddle： https://jsfiddle.net/r1x63b8v/

＆＃xA;

内联插件不起作用

1 个答案: