从 DOM 元素中获取 CanvasJS 图表的实例

Question

我的图表定义为

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

而且我需要通过其 DOM 元素访问图表的实例（我不想将 myChart 设为全局变量。我已尝试使用这两种方法检索图表的实例

var charr = $('#myChartContainer').CanvasJS()
var charr = $('#myChartContainer').CanvasJSChart()

但它们都不起作用。第一个抛出jquery-3.4.1.min.js:2 Uncaught TypeError: $(...).CanvasJS is not a function，第二个只是返回一个未定义的对象。我正在使用 CanvasJS 的 jQuery 插件。

我错过了什么？如何检索图表的实例？

仅供参考，我已经看到this 的回答，但没有帮助。

Answer 1

根据您分享的代码示例，您似乎正在使用 CanvasJS 的 jQuery 插件，但创建图表 JavaScript 方式。根据CanvasJS jQuery documentation，您可以将图表创建为$("#myChartContainer").CanvasJSChart(chartOptions);，然后您可以获得对图表的引用为$("#myChartContainer").CanvasJSChart();。工作示例如下所示。

var options = {
  title: {
     text: "CanvasJS jQuery Chart"
  },
  data: [{
    type: "line",
    dataPoints: [
        { x: 1, y: 63 },
        { x: 2, y: 69 },
        { x: 3, y: 65 },
        { x: 4, y: 70 },
        { x: 5, y: 71 },
        { x: 6, y: 65 },
        { x: 7, y: 73 },
        { x: 8, y: 96 },
        { x: 9, y: 84 },
        { x: 10, y: 85 },
        { x: 11, y: 86 },
        { x: 12, y: 94 },
        { x: 13, y: 97 },
        { x: 14, y: 86 },
        { x: 15, y: 89 }
    ]
   }]
};
$("#chartContainer").CanvasJSChart(options);

var chart = $("#chartContainer").CanvasJSChart(); //Get reference to the chart instance
/*chart.options.title.text = "New Title";
chart.render();*/

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>