Javascript CanvasJS图形在缩放级别更改之前是否倾斜？

window.onload=function（）{
var chart=new CanvasJS.chart（“chartContainer”{
可缩放：错误，
animationEnabled：没错，
标题：{
文字：“手机订阅”
},
axisY2：{
valueFormatString:“0.0亿”，
最高：1.2，
间隔：.2，
交错颜色：“f5”，
gridColor:#D7D7D7“，
勾选颜色：“D7D7D7”
},
主题：“主题2”，
工具提示：{
分享：真的
},
图例：{
垂直排列：“底部”，
水平对齐：“中心”，
尺寸：15，
fontFamily：“Lucida Sans Unicode”
},
数据：[{
键入：“行”，
线宽：3，
axisYType:“次要”，
showInLegend：是的，
名称：“印度”，
数据点：[{
x：新日期（2001年，0），
y:0
}, {
x：新日期（2002年，0），
y:0.001
}, {
x：新日期（2003年，0），
y:0.01
}, {
x：新日期（2004年，0），
y:0.05
}, {
x：新日期（2005年，0），
y:0.1
}, {
x：新日期（2006年，0），
y:0.15
}, {
x：新日期（2007年，0），
y:0.22
}, {
x：新日期（2008年，0），
y:0.38
}, {
x：新日期（2009年，0），
y:0.56
}, {
x：新日期（2010年，0），
y:0.77
}, {
x：新日期（2011年，0），
y:0.91
}, {
x：新日期（2012年，0），
y:0.94
}
]
}, {
键入：“行”，
线宽：3，
showInLegend：是的，
名称：“中国”，
axisYType:“次要”，
数据点：[{
x：新日期（2001，00），
y:0.18
}, {
x：新日期（2002，00），
y:0.2
}, {
x：新日期（2003年，0），
y:0.25
}, {
x：新日期（2004年，0），
y:0.35
}, {
x：新日期（2005年，0），
y:0.42
}, {
x：新日期（2006年，0），
y:0.5
}, {
x：新日期（2007年，0），
y:0.58
}, {
x：新日期（2008年，0），
y:0.67
}, {
x：新日期（2009年，0），
y:0.78
}, {
x：新日期（2010年，0），
y:0.88
}, {
x：新日期（2011年，0），
y:0.98
}, {
x：新日期（2012年，0），
y:1.04
}
]
}, {
键入：“行”，
线宽：3，
showInLegend：是的，
名称：“美国”，
axisYType:“次要”，
数据点：[{
x：新日期（2001，00），
y:0.16
}, {
x：新日期（2002年，0），
y:0.17
}, {
x：新日期（2003年，0），
y:0.18
}, {
x：新日期（2004年，0），
y:0.19
}, {
x：新日期（2005年，0），
y:0.20
}, {
x：新日期（2006年，0），
y:0.23
}, {
x：新日期（2007年，0），
y:0.261
}, {
x：新日期（2008年，0），
y:0.289
}, {
x：新日期（2009年，0），
y:0.3
}, {
x：新日期（2010年，0），
y:0.31
}, {
x：新日期（2011年，0），
y:0.32
}, {
x：新日期（2012年，0），
y:0.33
}
]
}
],
图例：{
光标：“指针”，
项目点击：功能（e）{
if（typeof（e.dataSeries.visible）==“undefined”| | e.dataSeries.visible）{
e、 dataSeries.visible=false；
}否则{
e、 dataSeries.visible=true；
}
chart.render（）；
}
}
});
chart.render（）；
}

#控制面板(容器){
文本对齐：居中；
}
.cp\u内容\u容器{
填充顶部：12px；
文本对齐：左对齐；
颜色：#373737；
}
.cp\u内容\u容器>div{
显示：无；
}
输入控制面板选项卡{
显示：无；
}
label.control\u面板\u选项卡{
字体系列：Verdana、Tahoma、无衬线；
字号：600；
背景色：#C0B9C7；
颜色：白色；
显示：内联块；
填充：15px 25px；
文本对齐：居中；
边框：2件纯黑；
边界半径：15px；
}
标签.控制面板选项卡：悬停{
背景色：#AA95B9；
颜色：#fff；
光标：指针；
}
输入：选中+标签.控制面板\选项卡{
背景：#9471AB；
颜色：#fff；
}
#cp_表1：选中~.cp_内容#容器#cp_内容1，
#cp_表2：选中~.cp_内容_容器#cp_内容2{
显示：块；
}

表1
表2

可能的解决方案是在加载图形之后，在窗口上调用resize方法，我设法这样纠正了它

$(window).resize();

---

问题是图表的默认宽度设置为500，即使您在window.onload中调用chart.render（），因为它的容器不可见，所以它会以默认宽度创建图表，并一直停留在那里，直到再次调用chart.render（）（例如，调整窗口大小）这不是唯一的问题。例如，如果您调整窗口大小以修复图表，但单击“上一步”选项卡1，再次调整窗口大小，然后单击“上一步”选项卡2，则图表的大小再次错误

您可以在创建图表时设置显式宽度，但这会使图表不响应调整大小，这可能不是您想要的

我建议在tab2上使用一个单击处理程序来检查这种情况，并仅在图表可见且大小与其容器不同时调用chart.render（）

window.onload = function () {
    $("#cp_tab2").on("click", function() {
        if ($("#chartContainer").is(":visible") && $("#chartContainer canvas").width() !== $("#chartContainer").width()) {
            chart.render();
        }
    });

    var chart = new CanvasJS.Chart("chartContainer", {
        zoomEnabled: false,
// etc.

---

我在你的小提琴上试过这个，它解决了这个问题。请参阅我的工作说明。

fiidle链接在哪里？