javascript - 如何从 C3 JS 图表的选择器中获取对象引用

Question

我正在使用 c3.js用于绘图，一切都按预期工作。

但是，我想从其他脚本访问 API，即调用 resize 等...

如果我使用:

var chart = c3.generate({ ... });

然后我可以访问图表对象及其 API，如下所示:

chart.resize();

但是，如果我无法访问图表对象，因为它是另一个脚本，我可以获取 HTML DOM 元素(使用 jQuery):

$(".c3").each(function(i, chart) { 
    // Here I want to do something like chart.resize();
    // But chart is just the DOM reference, not the chart variable
    // I need something like c3.get(chart)????
});

但是循环中的chart是一个DOM对象，而不是c3.generate制作的var chart。

有什么办法可以得到这个对象吗？文档还没有完全完成 ;)

Answer 1

由于您已经在使用 jQuery，这里有一个使用 jQuery data 的解决方案:

保存对图表的引用，以其 DOM 元素为键:

var selector = '#some-selector';
var chart = c3.generate({
  bindTo: selector,
  // ...
});

$(selector).data('c3-chart', chart);

访问每个 .c3 元素的图表:

$('.c3').each(function() {
  var chart = $(this).data('c3-chart'); 
});