Javascript Back在HTML中不起作用
嗨，我正在制作饼图和甜甜圈图。所以，就像在加载页面时，饼图将在甜甜圈图中打开一样。通过点击油炸圈饼图，它将打开另一个油炸圈饼图。这里有一个链接，点击它就进入初始状态 这是我的小提琴- 无论如何，我在这里发布我的代码-Javascript Back在HTML中不起作用,javascript,html,canvasjs,Javascript,Html,Canvasjs,嗨，我正在制作饼图和甜甜圈图。所以，就像在加载页面时，饼图将在甜甜圈图中打开一样。通过点击油炸圈饼图，它将打开另一个油炸圈饼图。这里有一个链接，点击它就进入初始状态 这是我的小提琴- 无论如何，我在这里发布我的代码- <!DOCTYPE HTML> <html> <head> <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> <!
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!-- <link type='text/css' rel="stylesheet" href='style.css' /> -->
<style>
#chartContainerpie{
position: absolute;
top: 130px;
left: 0px;
}
#chartContainer{
position: absolute;
top: 0px;
left: 0px;
}
#link {
visibility : hidden;
top : 0px;
left : 0px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "My First Chart in CanvasJS"
},
backgroundColor: "transparent",
data: [{
click: function(e){
anotherchart();
},
// Change type to "doughnut", "line", "splineArea", etc.
type: "doughnut",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainerpie", {
backgroundColor: "transparent",
data: [{
// Change type to "doughnut", "line", "splineArea", etc.
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
indexLabelFontSize: "14px",
type: "pie",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
}
function anotherchart () {
document.getElementById("chartContainerpie").innerHTML = "";
document.getElementById("chartContainer").innerHTML = "";
document.getElementById("link").style.visibility = "visible";
// alert( e.dataSeries.type+ ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );
var chart = new CanvasJS.Chart("chartContainernew", {
backgroundColor: "transparent",
data: [{
// Change type to "doughnut", "line", "splineArea", etc.
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
indexLabelFontSize: "14px",
type: "doughnut",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
}
</script>
</head>
<body>
<div>
<div id="chartContainerpie" style="height: 188px; width: 100%;"></div>
<div id="chartContainer" style="height: 400px; width: 100%; "></div>
</div>
<div>
<div id="chartContainernew" style="height: 400px; width: 100%; "></div>
<a id="link" href="">Back</a>
</div>
</body>
</html>
#查特集装箱公司{
位置：绝对位置；
顶部：130像素；
左：0px；
}
#海图容器{
位置：绝对位置；
顶部：0px；
左：0px；
}
#链接{
可见性：隐藏；
顶部：0px；
左：0px；
}
window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”{
标题：{
文字：“我在画布上的第一张图表”
},
背景色：“透明”，
数据：[{
点击：功能（e）{
另一张图表（）；
},
//将类型更改为“甜甜圈”、“线条”、“夹心线”等。
类型：“甜甜圈”，
数据点：[{
标签：“苹果”，
y:10
}, {
标签：“橙色”，
y:15
}, {
标签：“香蕉”，
y:25
}, {
标签：“芒果”，
y:30
}, {
标签：“葡萄”，
y:28
}]
}]
});
chart.render（）；
var chart=new CanvasJS.chart（“chartContainerpie”{
背景色：“透明”，
数据：[{
//将类型更改为“甜甜圈”、“线条”、“夹心线”等。
indexLabelPlacement:“内部”，
indexLabelFontColor:“白色”，
indexLabelFontSize：“14px”，
键入：“馅饼”，
数据点：[{
标签：“苹果”，
y:10
}, {
标签：“橙色”，
y:15
}, {
标签：“香蕉”，
y:25
}, {
标签：“芒果”，
y:30
}, {
标签：“葡萄”，
y:28
}]
}]
});
chart.render（）；
}
函数另一个图表（）{
document.getElementById（“chartContainerpie”）.innerHTML=“”；
document.getElementById（“chartContainer”）.innerHTML=“”；
document.getElementById（“link”）.style.visibility=“可见”；
//警报（e.dataSeries.type+”，数据点{x:+e.dataPoint.x+”，y:+e.dataPoint.y+“}）；
var chart=new CanvasJS.chart（“chartContainernew”{
背景色：“透明”，
数据：[{
//将类型更改为“甜甜圈”、“线条”、“夹心线”等。
indexLabelPlacement:“内部”，
indexLabelFontColor:“白色”，
indexLabelFontSize：“14px”，
类型：“甜甜圈”，
数据点：[{
标签：“苹果”，
y:10
}, {
标签：“橙色”，
y:15
}, {
标签：“香蕉”，
y:25
}, {
标签：“芒果”，
y:30
}, {
标签：“葡萄”，
y:28
}]
}]
});
chart.render（）；
}
如果事情很简单，请原谅我 是一个
z-index放置
位置：相对；z-index:100z-indexz-index位置：绝对；排名：0；左：0