onclick 이벤트를 사용하여 그래프를 삭제하는 javascript 또는 jquery 함수

그래프 그리기에 인력거 라이브러리를 사용했습니다. 거기에 전설의 일부가 있습니다. 나는 또한 그래프를 삭제하기 위해 범례에 버튼을 사용했다. 즉, 닫기 버튼을 클릭하면 존경받는 그래프가 삭제됩니다. 그러나 나는 이것을 할 수 없다. 이 작업을 수행하는 데 JavaScript 또는 jQuery 함수가 있습니까? 이 문제에 대한 해결책을 찾도록 도와주세요. onclick 이벤트는 ..onclick 이벤트를 사용하여 그래프를 삭제하는 javascript 또는 jquery 함수

이 인력거 라이브러리를 사용하여, 그래프 내 코드 그래프의 삭제를위한 자바 스크립트 기능 ...

<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>

이 그래프와 존경의 전설을 세우고 내 전체 코드입니다 ..에 참여 댓글을 달았습니다 코드는 삭제 part.Is 거기에 어떤 JavaScript 또는 jQuery이 일을 할 수 있습니까? 이 문제에 대한 해결책을 찾도록 도와주세요. Onclick 이벤트 .. 그래프 삭제를위한 JavaScript 함수 '

출처

2014-02-12 user3301256

잘 모르겠지만 차트 레이어를 삭제하면 안됩니까? $ ('# chart'). remove(); 또는 비슷한, 당신이 적용하는 onclick 함수는 전체 차트가 아닌 #legend 요소를 통해, 나는 $ (this)가 #chart의 자식이라고 생각하는 범례 요소를 참조한다는 것을 의미합니다 – ITomas

그것도 시도 ..하지만 여전히 같은 문제. 이 문제를 해결하기위한 다른 해결책이 있습니까 ?? 예, 알려주십시오. – user3301256

자바 스크립트 오류 콘솔은 코드에서 여러 항목에 대해 불평합니다. 변경 사항을 구현하기 전에 오류를 찾기 위해 시간을 할애해야합니다. 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

onclick 이벤트를 사용하여 그래프를 삭제하는 javascript 또는 jquery 함수

답변

관련 문제