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事件删除图形

回答

相关问题