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

4dbbbstv  于 2022-11-23  发布在  Chart.js
关注(0)|答案(3)|浏览(146)

我定义了两个略有不同的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:我想到了一个可能的解决方案,即通过将插件的不同行为指定为单个图表的选项,然后定义一个基于图表的特定选项的插件。但我仍然想知道是否存在将插件应用于特定图表的方法。

u4dcyp6a

u4dcyp6a1#

我认为一个解决方案是在图表选项中为每个插件分配一个特定的属性。每个图表将填充一个不同的属性来使用每个插件。在你的例子中,你有plugin1plugin2
然后,在每个定义中,您将检查不同的属性,以查看该图表是否正在使用该插件。例如,您的定义将类似于:

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
});

因此,为了使用plugin 2,myBar 2图表需要一个特定的plugin 2属性(注册时会检查它),这样你就可以控制每个图表中哪些插件是活动的。
希望这对你有帮助!

6fe3ivhb

6fe3ivhb2#

目前Chartjs v2.9.4,来自chartjs documentation,如果你有多个图表,每个图表的插件都可以在图表的config中定义,像这样:

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
});
eeq64g8w

eeq64g8w3#

这个问题已经有五年的历史了。现在,我们可以使用plugins和钩子调用来实现这个问题。在这个例子中,beforeTooltipDraw可以捕获tooltip.caretX。我们也可以使用内置的interaction option来实现这个问题。
此实现适用于ChartJS的4.0.1版
第一个

相关问题