javascript或jquery函數用於使用onclick事件刪除圖形

我已經使用人力車庫來繪製圖形。那裏的傳奇部分就在那裏。我也使用圖例上的按鈕來刪除圖形。這意味着當我點擊關閉按鈕時，尊重圖應該被刪除。但我無法做到這一點。有沒有JavaScript或jQuery功能來做到這一點？請幫我找到解決方案。 onclick事件。對於圖形刪除JavaScript函數javascript或jquery函數用於使用onclick事件刪除圖形

這是我用黃包車庫繪製圖形代碼...

<html> 
<head> 
<title>Sample-Rickshaw example</title> 
<link type="text/css" rel="stylesheet" href="rickshaw.min.css"> 
<script src="vendor/d3.min.js"></script> 
<script src="vendor/d3.layout.min.js"></script> 
<script src="rickshaw.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
// CSS part 
<style> 
#chart_container { 
     position: relative; 
     display: inline-block; 
     font-family: Arial, Helvetica, sans-serif; 
} 
#chart { 
     display: inline-block; 
     margin-left: 40px; 
} 
#y_axis { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     width: 40px; 
} 
#legend { 
     display: oneline-block; 
     vertical-align: top; 
     margin: 0 0 0 10px; 
} 
#close_box { 
     btn_size:large; 
     font-family: Verdana, Geneva, sans-serif; 
     font-size:small ; font-weight: bold; 
     float: right; color: #666; 
     display: block; text-decoration: none; 
     border: 2px solid #666; 
     padding: 0px 3px 0px 3px; 

} 
</style> 
// actual code 
<body> 

<div id="chart_container"> 
     <div id="y_axis"></div> 
     <div id="chart"></div> 
</div> 
</head> 


<div id="chart"> 
</div> 
<div id="legend"> 

<FORM> 
<INPUT type="button" value="x" onclick="remove graph">Remove Graph 
</FORM> 
</div> 

// script for plotting data// 
<script> 
var palette = new Rickshaw.Color.Palette(); 

var graph = new Rickshaw.Graph({ 
     element: document.querySelector("#chart"), 
     width: 550, 
     height: 250, 
     series: [ 

       { 

         name: "Northeast", 
         data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ], 
         color: palette.color(), 


       } 
     ] 
}); 

var x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph }); 

var y_axis = new Rickshaw.Graph.Axis.Y({ 
     graph: graph, 
     orientation: 'left', 
     tickFormat: Rickshaw.Fixtures.Number.formatKMBT, 
     element: document.getElementById('y_axis'), 
}); 

var legend = new Rickshaw.Graph.Legend({ 
     element: document.querySelector('#legend'), 
     graph: graph 
}); 

graph.render(); 

// jquery function 
$('#legend').on('click','.button',function(e){ 
    $(this).remove(graph); 
    e.preventdefault 
}); 

/* 
$('#legend').on('click', function(e){ 
    $('#legend').remove(); // or do something else 
    e.preventDefault(); 
} 
*/ 

</script> 
//Html tags 
</body> 
</html>

這是我用來繪製圖形和尊敬的傳奇全代碼..評論部分代碼是用於刪除部分。是否有任何JavaScript或jQuery功能來做到這一點？請幫我找到解決方案。 Onclick事件..用於刪除圖形的JavaScript函數＃

來源

2014-02-12 user3301256

不確定，但不應該刪除圖表層？ $（'＃chart'）。remove（）;或類似的東西，你應用的onclick函數是在#legend元素上，我想這不是完整的圖表，我的意思是$（this）將引用傳說元素，我想象的是#chart的孩子 – ITomas

試過也..但仍然是同樣的問題。有沒有其他解決方案來解決這個問題？如果是，請讓我知道 – user3301256

JavaScript錯誤控制檯抱怨代碼中存在多個內容。在實施我的更改之前，可能需要一些時間自行查找您的錯誤。 在JavaScript中編寫代碼時，始終打開錯誤控制檯！

爲了讓你的代碼工作：

在onclick屬性的東西在JavaScript中的預期。相反的：

<!-- this is invalid, not a method call, not an initialization, in onclick ... --> 
<INPUT type="button" value="x" onclick="remove graph">Remove Graph

把

<input type="button" value="x" onclick="removegraph()" />Remove Graph

請注意，我也結束了與標籤/>。請注意，所有標籤都已正確關閉！

當我分析了網站上的內容，我注意到，該圖未在圖中的div印刷，但使用chart_container。要改變這種行爲，我編輯了圖表的參數：

var graph = new Rickshaw.Graph({ 
    element: $("#chart")[0], // I changed this line because this was obviously not working 
    width: 550, 
    height: 250, 
    series: [{ 
     name: "Northeast", 
     data: [ { x: -1893456000, y: 25868573 }, { x: -1577923200, y: 29662053 }, { x: -1262304000, y: 34427091 }, { x: -946771200, y: 35976777 }, { x: -631152000, y: 39477986 }, { x: -315619200, y: 44677819 }, { x: 0, y: 49040703 }, { x: 315532800, y: 49135283 }, { x: 631152000, y: 50809229 }, { x: 946684800, y: 53594378 }, { x: 1262304000, y: 55317240 } ], 
     color: palette.color() 
    }] 
});

更換你的方法

// jquery function 
$('#legend').on('click','.button',function(e){ 
    $(this).remove(graph); 
    e.preventdefault // this line throws an error, because there is no ; and it is not a method-call nor an initialization or anything 
});

與

// we've defined before, that this method is called when you click on the button X 
function removegraph() 
{ 
    $("#chart").remove() ; 
    // uncomment the following lines, if you want to remove also the chart_container and the legend 
    // $("#chart_container").remove() ; 
    // $("#legend").remove() ; 
}

另外要注意的是你打開並關閉標籤按照正確的順序，例如：

<html> 
    <head> 
    </head> 
    <body> 
    </body> 
</html>

這不是在你的代碼是正確的。

來源

2014-02-12 19:52:53 efux

謝謝你的幫助。這非常有幫助。但我想問的另一個問題。哪個函數有助於刪除按需圖形的度量數據，即onclick事件。意思是當我點擊關閉按鈕以及圖表時，尊重的數據也應該被刪除。請幫助我.. – user3301256

@ user3301256如果我的理解正確，您還想在點擊按鈕時刪除比例。這可以在您還刪除chart_container-div時實現。把下面一行放在你的removegraph（）函數中：'$（「＃chart_container」）。remove（）;'。我在我的回答中已經提到了這一點。（如果您不是這個意思，請具體說明您的問題。） – efux

@ user3301256或者如果您確實想刪除圖表的數據，請查看此示例：http://code.shutterstock.com/rickshaw /examples/lines.html – efux

javascript或jquery函數用於使用onclick事件刪除圖形

回答

相關問題