我想并排绘制2张画布图。
为此，我拿了一排表并在一列中绘制每一行。 但是只绘制了一张图表。
但是，当我一个接一个地绘制它们时，我可以看到两个图表。 这里有什么问题？
P.S：此代码不是来自我的应用程序，但情况类似
<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>
答案 0 :(得分：1)
阿尼尔，
使用bootstrap可以按如下方式执行：
<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>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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>
</head>
<body>
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div id="chartContainer1" style="height: 200px; width: 100%;"></div>
</div>
<div class="col-md-6">
<div id="chartContainer" style="height: 200px; width: 100%;"></div>
</div>
</div>
</div>
</body>
</html>
添加了bootstrap css链接并更改了正文中的代码...我希望这可以帮助你...