0
我想並排繪製2個畫布圖表。CanvasChart：無法在一頁中並排繪製2個圖表
爲此，我把表格中的每一行都繪製在一列中。 但只繪製了1張圖表。
但是，當我依次繪製它們時，我可以看到兩個圖表。 這裏有什麼問題？
PS：此代碼是不是從我的應用程序，但情況類似
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <script src="jquery-1.11.3.js" type="text/javascript"></script>
<script src="canvasjs.min.js" type="text/javascript"></script>-->
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.onload = function() {
function1();
function2();
}
function function1()
{
var chart = new CanvasJS.Chart("chartContainer1",
{
title: {
text: "Top Oil Reserves"
},
animationEnabled: true,
axisY: {
title: "Reserves(MMbbl)"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
theme: "theme2",
data: [
{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: [
{y: 297571, label: "Venezuela"},
{y: 267017, label: "Saudi"},
{y: 175200, label: "Canada"},
{y: 154580, label: "Iran"},
{y: 116000, label: "Russia"},
{y: 97800, label: "UAE"},
{y: 20682, label: "US"},
{y: 20350, label: "China"}
]
}
]
});
chart.render();
}
function function2()
{
var chart1 = new CanvasJS.Chart("chartContainer",
{
theme: "theme3",
animationEnabled: true,
title: {
text: "Crude Oil Reserves Vs Production, 2011",
fontSize: 30
},
toolTip: {
shared: true
},
axisY: {
title: "billion of barrels"
},
axisY2: {
title: "million barrels/day"
},
data: [
{
type: "column",
name: "Proven Oil Reserves (bn)",
legendText: "Proven Oil Reserves",
showInLegend: true,
dataPoints: [
{label: "Saudi", y: 262},
{label: "Venezuela", y: 211},
{label: "Canada", y: 175},
{label: "Iran", y: 137},
{label: "Iraq", y: 115},
{label: "Kuwait", y: 104},
{label: "UAE", y: 97.8},
{label: "Russia", y: 60},
{label: "US", y: 23.3},
{label: "China", y: 20.4}
]
},
{
type: "column",
name: "Oil Production (million/day)",
legendText: "Oil Production",
axisYType: "secondary",
showInLegend: true,
dataPoints: [
{label: "Saudi", y: 11.15},
{label: "Venezuela", y: 2.5},
{label: "Canada", y: 3.6},
{label: "Iran", y: 4.2},
{label: "Iraq", y: 2.6},
{label: "Kuwait", y: 2.7},
{label: "UAE", y: 3.1},
{label: "Russia", y: 10.23},
{label: "US", y: 10.3},
{label: "China", y: 4.3}
]
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
},
});
chart1.render();
}
</script>
<!-- <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>-->
</head>
<body>
<table><tr><td>
<div id="chartContainer1" style="height: 300px; width: 50%;">
</div>
<td>
<div id="chartContainer" style="height: 300px; width: 50%;">
</body>
</html>
而不是'寬度：50％'，嘗試'寬度：50vw' –