Javascript canvasjs中设置容器元素宽度的recursionCount错误
我对使用canvasjs插件制作图表相当陌生。有一个要求，我必须将chartcontainer调整到特定的宽度。将宽度从100%更改为300px时，我在IE和chrome上都出现了以下错误：递归计数未定义。以下是我正在使用的相同的代码片段：Javascript canvasjs中设置容器元素宽度的recursionCount错误,javascript,html,canvasjs,Javascript,Html,Canvasjs,我对使用canvasjs插件制作图表相当陌生。有一个要求，我必须将chartcontainer调整到特定的宽度。将宽度从100%更改为300px时，我在IE和chrome上都出现了以下错误：递归计数未定义。以下是我正在使用的相同的代码片段： <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> window.onload = fun
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Common Names"
},
exportFileName: "Pie Chart",
exportEnabled: true,
animationEnabled: true,
legend:{
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [
{
type: "pie",
showInLegend: true,
toolTipContent: "{legendText}: <strong>{y}%</strong>",
indexLabel: "{label} {y}%",
dataPoints: [
{ y: 732, legendText: "James", exploded: true, label: "James" },
{ y: 4, legendText: "West", label: "West" },
{ y: 3, legendText: "John", label: "John" },
{ y: 247, legendText: "Peter", label: "Peter"},
{ y: 2716, legendText: "Mark", label: "MArk" },
{ y: 2, legendText: "Luke", label: "Luke"}
]
}
]
});
chart.render();
var chart1 = new CanvasJS.Chart("chartContainer1",
{
title:{
text: "Top Categoires of New Year's Resolution"
},
exportFileName: "Bar Graph",
exportEnabled: true,
animationEnabled: true,
legend:{
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [
{
type: "bar",
showInLegend: true,
toolTipContent: "{legendText}: <strong>{y}%</strong>",
indexLabel: "{label} {y}%",
dataPoints: [
{ y: 35, legendText: "Health", exploded: true, label: "Health" },
{ y: 20, legendText: "Finance", label: "Finance" },
{ y: 18, legendText: "Career", label: "Career" },
{ y: 15, legendText: "Education", label: "Education"},
{ y: 5, legendText: "Family", label: "Family" },
{ y: 7, legendText: "Real Estate", label: "Real Estate"}
]
}
]
});
chart1.render();
var chart2 = new CanvasJS.Chart("chartContainer2",
{
theme: "theme2",
title:{
text: "Earthquakes - per month"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]}]
});
chart2.render();
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 300px;"></div>
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>
</body>
</html>
window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”，
{
标题：{
正文：“通用名称”
},
exportFileName:“饼图”，
exportEnabled:true，
animationEnabled：没错，
图例：{
垂直排列：“底部”，
水平对齐：“中心”
},
数据：[
{
键入：“馅饼”，
showInLegend：是的，
toolTipContent:“{legendText}:{y}%”，
索引标签：“{label}{y}%”，
数据点：[
{y:732，传奇文本：“詹姆斯”，爆炸：真，标签：“詹姆斯”}，
{y:4，legendText:“West”，标签：“West”}，
{y:3，传奇文本：“约翰”，标签：“约翰”}，
{y:247，传奇文本：“彼得”，标签：“彼得”}，
{y:2716，legendText:“Mark”，label:“Mark”}，
{y:2，传奇文本：“卢克”，标签：“卢克”}
]
}
]
});
chart.render（）；
var chart1=新建CanvasJS.Chart（“chartContainer1”，
{
标题：{
正文：“新年决议的主要议题”
},
exportFileName:“条形图”，
exportEnabled:true，
animationEnabled：没错，
图例：{
垂直排列：“底部”，
水平对齐：“中心”
},
数据：[
{
输入：“酒吧”，
showInLegend：是的，
toolTipContent:“{legendText}:{y}%”，
索引标签：“{label}{y}%”，
数据点：[
{y:35，legendText:“健康”，爆炸：真，标签：“健康”}，
{y:20，legendText:“金融”，标签：“金融”}，
{y:18，传奇文本：“职业”，标签：“职业”}，
{y:15，legendText:“教育”，标签：“教育”}，
{y:5，legendText:“家庭”，标签：“家庭”}，
{y:7，legendText:“房地产”，标签：“房地产”}
]
}
]
});
图1.render（）；
var chart2=新建CanvasJS.Chart（“chartContainer2”，
{
主题：“主题2”，
标题：{
正文：“地震-每月”
},
animationEnabled：没错，
axisX：{
valueFormatString:“嗯”，
间隔时间：1，
间隔类型：“月”
},
axisY：{
包括：错
},
数据：[
{
键入：“行”，
//线宽：3，
数据点：[
{x:新日期（2012,00,1），y:450}，
{x:新日期（2012年1月1日），y:414}，
{x:new Date（2012年2月1日），y:520，indexLabel:“最高”，markerColor:“红色”，markerType:“三角形”}，
{x:新日期（2012年3月1日），y:460}，
{x:新日期（2012年4月1日），y:450}，
{x:新日期（2012年5月1日），y:500}，
{x:新日期（2012年6月1日），y:480}，
{x:新日期（2012年7月1日），y:480}，
{x:new Date（2012年8月1日），y:410，indexLabel:“最低”，markerColor:“深灰色”，markerType:“交叉”}，
{x:新日期（2012年9月1日），y:500}，
{x:新日期（2012年10月1日），y:480}，
{x:新日期（2012年11月1日），y:510}
]}]
});
图2.render（）；
}
提前感谢。我在脚本标记内的html页面中创建了一个同名变量，从而解决了这个错误 在每次初始化CanvasJS.Chart元素之前，我都添加了以下行：
recursionCount = 0;
window.onload = function () {
recursionCount = 0;
//code for chartContianer
recursionCount = 0;
//code for chartContianer 1
recursionCount = 0;
//code for chartContianer 2
};