0
こんにちは私は円グラフとドーナツチャートを開発していました。それで、ドーナツチャートの中にページ円グラフを読み込むような感じでした。ドーナツチャートをクリックすると、別のドーナツチャートが開きます。そして、これが最初の状態になるリンクをクリックします。ここでバックはHTMLで動作しません
は私のバイオリンです - Fiddle link
とにかく私はhere-
<!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>
私のコードをポスト今基本的に私の問題は非常に小さいです。ページの左上の位置に戻るリンクが必要です。だから、チャートの上にあるリンクのdivタグを動かしていると、リンクは機能していないのですが、動作させた後に置いているとします。だから私の質問なぜそれが動作していないと私はそれを動作させるために何ができるのですか？
非常に簡単なことであれば私を許してください。
「戻る」ボタンを右クリックし、「要素を検査」をクリックします。リンクの上に別の要素があることがわかります。ブラウザのデバッグツールを使用する方法を学びます。 – Turnip
@Turnipはい正しいです – shv22
'z-index'は問題を解決する可能性が高いですが、' z-index'で要素を整理することは、常に新しい要素の問題につながります。見つけて。おそらくすべてのポジションを持っていない方が良いでしょう。トップ：0; left：0'の代わりに要素をレイアウトすると、リンクの下にグラフが表示されます。 – Nope