10

我定义了两个略有不同的 Chart.js 插件，并且我有一个包含两个不同图表的页面。我想将第一个插件应用于第一个图表，将第二个插件应用于第二个图表。

根据消息来源，插件有注册和注销功能，但是您将它们注册到某个全局变量“Chart.plugins”。

我试过这样的解决方案：

Chart.plugins.register(plugin1);
window.myBar = new Chart(...);
Chart.plugins.unregister(plugin1);

Chart.plugins.register(plugin2);
window.myBar2 = new Chart(...);
Chart.plugins.unregister(plugin2);

但似乎这会在任何事情发生之前取消注册这两个插件。如果我不取消注册插件，第二个会覆盖第一个插件所做的任何事情。

此外，似乎无法将插件直接注册到特定图表，例如“windows.myBar.plugins”未定义。

有人知道是否存在不同的解决方案吗？

Edit1：我想到了一种可能的解决方法，即通过将插件的不同行为指定为各个图表的选项，然后定义一个基于图表的特定选项起作用的单个插件。但我仍然想知道是否存在将插件应用于特定图表的方法。

4

2 回答 2

15

我认为一个解决方案是在图表选项中为每个插件分配一个特定的属性。每个图表将填充不同的属性以使用每个插件。在你的情况下，你有plugin1and plugin2。

然后，在每个定义中，您将检查不同的属性以查看该图表是否使用该插件。例如，您的定义将类似于：

Chart.pluginService.register({
  afterDraw: function(chart) {
    if (chart.config.options.plugin_one_attribute) {
      // Plugin code here...  
    }
  }
});

要使用此插件，您的图表必须在其选项中填写 plugin_one_attribute。像这样：

optionsUsingPlugin1 = {
  plugin_one_attribute: // Your variable to be used in the plugin goes here!
  responsive: true,      
  maintainAspectRatio: true,
  title: {
    display: true
  } 
  // And any other config options you are already using
}

在创建图表时使用它：

var myBar = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: optionsUsingPlugin1
});

因此，为了使用 plugin2，您的 myBar2 图表将需要 plugin2 的特定属性（注册时将检查它）。通过这种方式，您可以控制哪些插件将在每个图表中处于活动状态。

希望有帮助！

于 2016-09-12T20:00:44.810 回答
4

目前 Chartjs v2.9.4，来自chartjs 文档，如果你有多个图表，每个图表的插件可以在图表的配置中定义，如下所示：

var ctx = document.getElementById("myChart").getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    plugins: [{ //plugin added for this chart
        beforeInit: function(chart, options) {
            //Add statements here
        }
   }],
   options: {
      responsive: true, // Instruct chartjs to respond nicely.
      maintainAspectRatio: false
   },
   // And any other config options as you wish
});
于 2020-11-17T08:37:37.720 回答