使用CanvasJS jQuery插件时如何通过DOM元素获取图表实例

问题根因 #

你当前使用原生CanvasJS API初始化图表，没有按照CanvasJS jQuery插件的规范流程操作，因此无法通过jQuery方法获取到实例：

1. $('#myChartContainer').CanvasJS() 属于API名称调用错误，自然会抛出方法不存在的异常
2. 只有通过jQuery插件方式初始化的图表，才可以通过CanvasJSChart()方法直接获取实例，原生初始化的实例不会自动挂载到DOM元素对应的jQuery对象上

解决方法 #

你可以根据自己的需求二选一：

方法1：改用jQuery插件规范初始化图表（推荐）

直接用CanvasJS提供的jQuery方法初始化，后续直接调用方法即可拿到实例：

1. 初始化代码调整为：

$('#myChartContainer').CanvasJSChart({
    animationEnabled: true,
    axisY :{
        includeZero: false,
        gridColor: "rgba(140, 140, 140, 1)"
    },
    toolTip: {
        shared: true,
        content: false
    },
    legend: {
        fontSize: 13
    },
    data: myChartData.json
});

2. 获取实例的代码为：

var chart = $('#myChartContainer').CanvasJSChart();
// 拿到实例后可正常调用原生API，比如刷新图表：chart.render()

方法2：保留原生初始化逻辑，手动挂载实例

如果不想改动现有初始化代码，可以在初始化后手动将实例挂载到DOM对象上：

1. 初始化时增加挂载逻辑：

var myChart = new CanvasJS.Chart("myChartContainer", {
    // 你原有配置保持不变
    animationEnabled: true,
    axisY :{
        includeZero: false,
        gridColor: "rgba(140, 140, 140, 1)"
    },
    toolTip: {
        shared: true,
        content: false
    },
    legend: {
        fontSize: 13
    },
    data: myChartData.json
});
// 手动将实例存入jQuery元素的data属性
$('#myChartContainer').data('canvasjs-chart', myChart);

2. 获取实例的代码为：

var chart = $('#myChartContainer').data('canvasjs-chart');

注意事项 #

• 需确保资源加载顺序正确：先加载jQuery，再加载带jQuery插件的CanvasJS版本，不要引入纯原生版本的CanvasJS
• 必须等图表初始化逻辑执行完成后再获取实例，不要在DOM未就绪、初始化代码未执行时调用获取方法

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