如何从 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'); 
});