我正在尝试以 2x2 表格形式创建一个包含 4 个图表的“仪表板”。我可以让图表显示在<head>页面的部分中，但不能显示在<body>. 我正在按照 canvasJS 的指示进行操作，但无法使其正常工作。我现在只是使用 4 个示例图来测试它
<head>
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="width: 400px; height: 300px;float:left;"></div>
<div id="chartContainer2" style="width: 400px; height: 300px;"></div> </br>
<div id="chartContainer3" style="width: 400px; height: 300px;float:left;"></div>
<div id="chartContainer4" style="width: 400px; height: 300px;"></div>
<script>
var chart = new CanvasJS.Chart("chartContainer1",
{
animationEnabled: true,
title: {
text: "Spline Area Chart"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(255,12,32,.3)",
type: "splineArea",
dataPoints: [
{ x: new Date(1992, 0), y: 2506000 },
{ x: new Date(1993, 0), y: 2798000 },
{ x: new Date(1994, 0), y: 3386000 },
{ x: new Date(1995, 0), y: 6944000 },
{ x: new Date(1996, 0), y: 6026000 },
{ x: new Date(1997, 0), y: 2394000 },
{ x: new Date(1998, 0), y: 1872000 },
{ x: new Date(1999, 0), y: 2140000 },
{ x: new Date(2000, 0), y: 7289000 },
{ x: new Date(2001, 0), y: 4830000 },
{ x: new Date(2002, 0), y: 2009000 },
{ x: new Date(2003, 0), y: 2840000 },
{ x: new Date(2004, 0), y: 2396000 },
{ x: new Date(2005, 0), y: 1613000 },
{ x: new Date(2006, 0), y: 2821000 }
]
},
]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainer2",
{
animationEnabled: true,
title: {
text: "Pie Chart",
},
data: [
{
type: "pie",
showInLegend: true,
dataPoints: [
{ y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },
{ y: 2175498, legendText: "Wii", indexLabel: "Wii" },
{ y: 3125844, legendText: "360", indexLabel: "Xbox 360" },
{ y: 1176121, legendText: "DS", indexLabel: "Nintendo DS" },
{ y: 1727161, legendText: "PSP", indexLabel: "PSP" },
{ y: 4303364, legendText: "3DS", indexLabel: "Nintendo 3DS" },
{ y: 1717786, legendText: "Vita", indexLabel: "PS Vita" }
]
},
]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainer3",
{
animationEnabled: true,
title: {
text: "Line Chart"
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
axisY: {
includeZero: false
},
data: [
{
type: "line",
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 }
]
}
]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainer4",
{
animationEnabled: true,
title: {
text: "Column Chart"
},
axisX: {
interval: 10,
},
data: [
{
type: "column",
legendMarkerType: "triangle",
legendMarkerColor: "green",
color: "rgba(255,12,32,.3)",
showInLegend: true,
legendText: "Country wise population",
dataPoints: [
{ x: 10, y: 297571, label: "India" },
{ x: 20, y: 267017, label: "Saudi" },
{ x: 30, y: 175200, label: "Canada" },
{ x: 40, y: 154580, label: "Iran" },
{ x: 50, y: 116000, label: "Russia" },
{ x: 60, y: 97800, label: "UAE" },
{ x: 70, y: 20682, label: "US" },
{ x: 80, y: 20350, label: "China" }
]
},
]
});
chart.render();
</script>
<style>
#page {
margin: 5% 10% 0% 10%;
font-family: "Century Gothic";
font-weight: lighter;
}
#header {
background-color: white;
color: black;
font-weight: 100;
text-align:left;
padding:5px;
}
#nav {
line-height: 50px;
background-color: #707070;
height: 100%;
width: 10%;
float: left;
border-radius: 10px;
padding: 10px;
}
#section {
margin-left: 1%;
background-color: #A8A8A8;
height: 100%;
width: 85%;
float: left;
border-radius: 10px;
padding: 10px;
}
#footer {
background-color: black;
color: white;
clear: both;
text-align: center;
border-radius: 10px;
padding: 5px;
}
a {text-decoration: none; border-radius: 10px; padding: 10px 5px 10px 4px;}
a:link {color:orange; background-color:transparent}
a:visited {color:orange; background-color:transparent}
a:hover {color:orange; background-color:#D8D8D8}
a:active {color:orange; background-color:transparent}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1>Dashboard</h1>
</div>
<div id="nav" align="center">
<a href="dashboard.html">Dashboard</a><br>
<a href="sales.html">Sales</a><br>
<a href="products.html">Products</a><br>
<a href="customers.html">Customers</a><br>
<a href="referrals.html">Referrals</a><br>
</div>
<div id="section">
<table style="width:100%; height:100%;" align="center">
<tr>
<td>Daily Sales<div id="chartContainer1" style="width: 100%; height: 100%;float:left;"></div></td>
<td>New and Returning Customers<div id="chartContainer2" style="width: 400px; height: 300px;"></div> </br></td>
</tr>
<tr>
<td>Popular Products<div id="chartContainer3" style="width: 400px; height: 300px;float:left;"></div></td>
<td>Revenue by Product Category<div id="chartContainer4" style="width: 400px; height: 300px;"></div> </td>
</tr>
</table>
</div>
<div id="footer">
<p> Footer </p>
</div>
</div>
</body>