Javascript图形不显示在主体中，但显示在头部
我正在尝试创建一个“仪表板”，在2x2表格中包含4个图形。我可以让图形显示在页面的Javascript图形不显示在主体中，但显示在头部,javascript,html,css,canvasjs,Javascript,Html,Css,Canvasjs,我正在尝试创建一个“仪表板”，在2x2表格中包含4个图形。我可以让图形显示在页面的部分，但不能显示在中。我在做canvasJS指示的事情，但无法让它工作。我现在只使用4个示例图来测试它 <head> <script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer1" style
<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>
var chart=new CanvasJS.chart（“chartContainer1”，
{
animationEnabled：没错，
标题：{
文本：“样条曲线面积图”
},
axisX：{
间隔时间：10，
},
数据：[
{
类型：“splineArea”，
颜色：“rgba（255,12,32,3）”，
类型：“splineArea”，
数据点：[
{x:新日期（1992年，0），y:2506000}，
{x:新日期（1993年，0），y:2798000}，
{x:新日期（1994，0），y:3386000}，
{x:新日期（1995，0），y:6944000}，
{x:新日期（1996，0），y:6026000}，
{x:新日期（1997，0），y:2394000}，
{x:新日期（1998，0），y:1872000}，
{x:新日期（1999，0），y:2140000}，
{x:新日期（2000，0），y:7289000}，
{x:新日期（2001年，0），y:4830000}，
{x:新日期（2002，0），y:2009000}，
{x:新日期（2003，0），y:2840000}，
{x:新日期（2004，0），y:2396000}，
{x:新日期（2005，0），y:1613000}，
{x:新日期（2006，0），y:2821000}
]
},
]
});
chart.render（）；
var chart=new CanvasJS.chart（“chartContainer2”，
{
animationEnabled：没错，
标题：{
文本：“饼图”，
},
数据：[
{
键入：“馅饼”，
showInLegend：是的，
数据点：[
{y:4181563，legendText:“PS 3”，索引标签：“PlayStation 3”}，
{y:2175498，legendText:“Wii”，索引标签：“Wii”}，
{y:3125844，legendText:“360”，索引标签：“Xbox 360”}，
{y:1176121，legendText:“DS”，indexLabel:“任天堂DS”}，
{y:1727161，legendText:“PSP”，indexLabel:“PSP”}，
{y:4303364，传奇文本：“3DS”，索引标签：“任天堂3DS”}，
{y:1717786，legendText:“Vita”，索引标签：“PS Vita”}
]
},
]
});
chart.render（）；
var chart=new CanvasJS.chart（“chartContainer3”，
{
animationEnabled：没错，
标题：{
正文：“折线图”
},
axisX：{
valueFormatString:“嗯”，
间隔时间：1，
间隔类型：“月”
},
axisY：{
包括：错
},
数据：[
{
键入：“行”，
数据点：[
{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}
]
}
]
});
chart.render（）；
var chart=new CanvasJS.chart（“chartContainer4”，
{
animationEnabled：没错，
标题：{
正文：“柱状图”
},
axisX：{
间隔时间：10，
},
数据：[
{
键入：“列”，
legendMarkerType:“三角形”，
legendMarkerColor：“绿色”，
颜色：“rgba（255,12,32,3）”，
showInLegend：是的，
legendText:“明智的国家人口”，
数据点：[
{x:10，y:297571，标签：“印度”}，
{x:20，y:267017，标签：“沙特”}，
{x:30，y:175200，标签：“加拿大”}，
{x:40，y:154580，标签：“伊朗”}，
{x:50，y:116000，标签：“俄罗斯”}，
{x:60，y:97800，标签：“阿联酋”}，
{x:70，y:20682，标签：“US”}，
{x:80，y:20350，标签：“中国”}
]
},
]
});
chart.render（）；
#页面{
利润率：5%10%0%10%；
字体系列：“世纪哥特式”；
字体重量：较轻；
}
#标题{
背景色：白色；
颜色：黑色；
字号：100；
文本对齐：左对齐；
填充物：5px；
}
#导航{
线高：50px；
背景色：#707070；
身高：100%；
宽度：10%；
浮动：左；
边界半径：10px；
填充：10px；
}
#部分{
左缘：1%；
背景色：#A8A8A8；
身高：100%；
宽度：85%；
浮动：左；
边界半径：10px；
填充：10px；
}
#页脚{
背景色：黑色；
颜色：白色；
明确：两者皆有；
文本对齐：居中；
边界半径：10px；
填充物：5px；
}
{文本装饰：无；边框半径：10px；填充：10px 5px 10px 4px；}
链接{颜色：橙色；背景色：透明}
a:访问{颜色：橙色；背景色：透明}
a:悬停{颜色：橙色；背景色：#D8D8D8}
a:活动{颜色：橙色；背景色：透明}
仪表板
1.div tags in the head
2.In-proper tags in tables
3.Un-necessary `</br>` tags // which can be solved through `CSS`