如何通过bindto或容器ID获取Billboard.js图表实例？

以下是两种可靠的实现方式，避开依赖创建顺序和私有属性的问题：

方式一：手动维护实例映射表 #

在创建图表时，直接把实例和对应的容器ID绑定到一个自定义对象里，后续直接通过ID取值即可：

// 初始化一个全局或模块级的映射对象
const chartInstances = {};

// 创建图表时存入映射表
const chart1 = bb.generate({
    bindto: "#chartName1",
    // 其他配置...
});
chartInstances["#chartName1"] = chart1;

const chart2 = bb.generate({
    bindto: "#chartName2",
    // 其他配置...
});
chartInstances["#chartName2"] = chart2;

// 后续获取实例，直接通过ID
const targetChart = chartInstances["#chartName1"];

这种方式完全可控，TypeScript也不会有类型报错，是最稳妥的方案。

方式二：遍历bb.instance匹配DOM元素ID #

利用每个图表实例自带的$el属性（指向绑定的DOM元素），遍历全局实例数组匹配ID：

function getChartByContainerId(containerId: string) {
    return bb.instance.find(chart => {
        // 处理containerId带#的情况，匹配DOM的id属性
        return chart.$el.id === containerId.replace(/^#/, "");
    });
}

// 使用示例
const myChart = getChartByContainerId("#chartName");
// 也可以直接传入不带#的ID
const myChart = getChartByContainerId("chartName");

这个方法不需要额外维护映射表，通过官方公开的$el属性实现，TypeScript不会提示私有属性问题，兼容性更好。

注意：不要尝试访问_groups这类私有属性，这类属性属于内部实现，随时可能变更，而且TypeScript会因为类型定义限制报错，完全没必要依赖。

内容的提问来源于stack exchange，提问作者space