个人中心
gpt4 book ai didi

使用 onclick 事件删除图形的 javascript 或 jquery 函数

转载 作者：太空宇宙 更新时间：2023-11-03 18:21:34 24 4
gpt4 key购买 nike

我使用人力车库来绘制图表。那里有传说部分。我还使用图例上的按钮删除图表。这意味着当我点击关闭按钮时，相关图表应该被删除。但我无法做到这一点。是否有任何 JavaScript 或 jQuery 函数可以执行此操作？请帮助我找到解决方案。 onclick 事件.. 用于删除图形的 JavaScript 函数

这是我使用人力车库绘制图形的代码...

<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 函数`

最佳答案

JavaScript 错误控制台会在您的代码中提示多项内容。在您实现我的更改之前，也许需要一些时间自己找出错误。 在使用 JavaScript 编写代码时，始终打开错误控制台!

要让您的代码正常工作:

在 onclick-attribute 中，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>

这在您的代码中是不正确的。

关于使用 onclick 事件删除图形的 javascript 或 jquery 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21726457/

24 4 0
文章推荐： ruby - 在 Pry 中配置帮助输出
文章推荐： python - Surveymonkey API : check if a specific email has completed survey
文章推荐： ruby-on-rails - 无法加载此类文件 -- mysql12 (LoadError)
文章推荐： python - 当电脑关闭时触发一个函数 - tkinter
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com