Hallo Ich Kreisdiagramm und Ringdiagramm entwickeln. Also, es war wie beim Laden einer Seite Kreisdiagramm wird in einem Donut-Diagramm geöffnet. Durch Klicken auf das Donut-Diagramm öffnet sich ein weiteres Donut-Diagramm. Und es gibt einen Link, indem Sie darauf klicken, was in den ursprünglichen Zustand geht.Zurück funktioniert nicht in HTML
Hier ist meine Geige - Fiddle link
Wie dem auch sei Posting ich meinen Code hier-
<!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>
Jetzt im Grunde mein Problem sehr klein ist. Ich brauche meinen hinteren Link, um oben links auf der Seite zu sein. Also, wenn ich mein div-Tag des Links über dem Diagramm verschiebe, funktioniert der Link nicht, aber wenn ich es setze, nachdem es funktioniert. Also, meine Frage, warum es nicht funktioniert und was ich tun kann, damit es funktioniert.
Bitte verzeihen Sie mir, wenn es sich um eine sehr einfache Sache ist.
Rechtsklick auf dem Rücken Taste und "Inspect Element". Sie werden feststellen, dass sich ein anderes Element oberhalb Ihres Links befindet. Erfahren Sie, wie Sie die Debugging-Tools Ihres Browsers verwenden. – Turnip
@Turnip ja Sie waren richtig – shv22
Während 'z-index' höchstwahrscheinlich das Problem behebt, Anfahrelemente zu organisieren, indem' z-index' ist nicht sehr zukunftssicher, da es immer Probleme mit neuen Elementen führen kann, für immer zu debuggen nehmen und finde. Wahrscheinlich besser, nicht alles zu haben: Position: absolut; oben: 0; links: 0', sondern lege die Elemente so an, dass du die Diagramme unterhalb des Links haben musst. – Nope