将冲突插件应用/注册到不同的图表

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

根据source，有一个插件的注册和取消注册函数，但是你注册它们到一些全局变量'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：我想到了一种可能的解决方法，即通过指定插件的不同行为作为各个图表的选项，然后定义一个基于图表特定选项的插件。但我仍然想知道是否存在将插件应用于特定图表的方法。

来源

2016-08-03 David

我认为一个解决方案是在每个插件的图表选项中分配一个特定的属性。每个图表将填充不同的属性以使用每个插件。在你的情况下，你有plugin1和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-12 20:00:44

谢谢！这似乎是最好的解决方案。我最终使我的插件非常模块化，并基于选项中指定的参数。但是这个解决方案直接解决了问题（并且更适合尝试/原型设计！） – David

将冲突插件应用/注册到不同的图表

回答

相关问题