从 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插件。

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

仅供参考，我看过这个答案，但它没有帮助。

Answer 1

根据你分享的代码样本，你似乎正在使用CanvasJS的jQuery插件，但创建图表JavaScript的方式。根据CanvasJS jQuery文档，您可以创建图表为$("#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>