두 프로젝트 개발에서 발생하는 문제를 기록하십시오. 하나는 이미지 작동으로 저장하기위한 Echarts의 외부 호출이고, 다른 하나는 빠른 마우스 움직임으로 인해 트리거 된 워크 플로 워크 플로 연결 곡선 및 OnMouseleave 이벤트입니다.
1. 외부 버튼 호출 ECHARTS 차트 저장은 사진 작동으로 저장됩니다.
최근에 나는 Echarts 라이브러리를 사용하여 차트를 그렸습니다. 요구 사항에 따르면, 차트 작동을 차트 외부에서 호출 할 수 있으므로 차트 설정을 저장할 수 있기를 바랍니다. 주로 프로젝트 전에 다운로드 이미지 작동 인터페이스와 일치 할 수 있기를 바랍니다. 그런 다음 온라인에서 몇 가지 방법을 찾았지만 만족할 수있는 사람을 만나지 못했습니다. 나중에 Echart가 소스 코드를 열었고 소스 코드를 살펴보고 다운로드 방법을 찾은 다음 호출 할 수 있다고 생각했습니다 (아마도 기술적으로 매우 기술적 이었기 때문에 메소드를 직접 호출하는 방법을 보지 않았기 때문에 소스 메소드를 복사하여 변경해야했습니다. 차트의 컨테이너 ID를 전달해야했습니다).
Echart 다이어그램 표현 예제 (도구 모음에 다운로드 사진 버튼이 있음)
코드를 첨부하여 기록하십시오
// 차트 컨테이너 IDFunction DownloadImpByChart (chartID) {var mychart = echarts.getInstanceBydom (wort.getElementByid (chartid)); var url = mychart.getConnectedDataurl ({pixelratio : 5, // 내보낸 이미지 resolution resolution is 1 beankgroudcolor : //########fff ', // // 도구 구성 요소는 차트를 저장할 때 무시됩니다. 도구 모음 '도구 상자'는 기본적으로 무시됩니다. + 타입; $ a.target = '_blank'; $ a.href = url; // chrome and firefoxif (typeof mouseevent === 'function') {var evt = new Mouseevent ( 'click', {window : window : bubbles : true, cantable : cantable : a.dispatchevent (evt); style = "margin : 0;"> ' +'<img src = " ' + url +'"style = "max width : 100%;" /> '+'</body> '; var tab = window.open (); tab.document.write (html);}};이러한 방식으로 자체 다운로드 작업을 사용할 수 있으며 버튼과 하이퍼 링크를 외부로 사용자 정의하고 위의 방법을 직접 호출하여 외부 호출을 실현하여 사진을 저장할 수 있습니다.
2. Onmouseenter와 Onmouseleave가 너무 빠르게 움직여 이벤트 메커니즘이 올바른 타이밍을 유발합니다.
위에서 설명합시다
마우스가 곡선에서 움직일 때 곡선을 강조 할 수있을뿐만 아니라 가위 아이콘을 마우스 위치에 추가하여 가위를 누르면 곡선을 삭제할 수 있기를 바랍니다. 이전 곡선에 직접 사용 된 마우스 및 마우셀 리브 방법은 여러 곡선에서 마우스가 빠르게 움직일 때 많은 문제가 발생합니다 (커서가 떠날 때 가위가 사라지지 않으며 여러 곡선이 강조됩니다). 논리적 판단을 추가하고 마우스 오버 및 마우스 아웃 방법을 변경하려고하면 작동하지 않습니다. 나중에 나는 갑자기 mousemove 방법을 사용할 수 있다고 생각했다. 마우스가 가위 차트의 영역 내에 있는지 확인하십시오. 그렇다면 곡선을 강조 표시하십시오. 더 이상 없으면 모든 곡선이 기본 스타일로 돌아갑니다. 그런 다음 성공했습니다. 하루 종일 괴로워한 문제는 마침내 해결되었습니다. (MouseMove는 마우스를 움직일 때 끊임없이 듣고 이벤트를 듣고 트리거해야하기 때문에이 상태에서 곡선과 도면 가위를 강조하는 방법을 나타내는 상태 플래그를 갖는 것이 가장 좋습니다. 그림의 호출 시간은 마우스가 곡선에 들어가면 전역 변수를 TRUE로 설정하고 후속 마우스 조작이 변수를 기반으로 한 후속 마우스 조작을 결정한다는 것입니다.
몇 가지 주요 코드를 기록하십시오
마우스가 하이라이트를 입력하고 가위 차트를 그립니다.
$ (document) .on ( "마우스 엔터", "SVG .Curve", function (e) {// 입력 할 때마다 원래 상태 $ ( "svg .node")로 복원됩니다. in_node_id = link.input.nodeid; var out_node_id = link.output.nodeid; $ ( "#"#"#"+out_node_id+link.output.output.pointname+in_node_id+in_node_id+link.input.pointName) e) .attr ( "class", "curve");}); // 편집 상태에서 작동 가능한 아이콘을 표시해야합니다. if (args.state == "edit") {del_curve.ref_curve = this; del_curve.has_del_curve = true; if ($ ( "#del-curve-icon"). length> 0) {$ ( "#del-curve-icon"). css ( "#del-curve-icon"). e.pagex-obj.offset (). Left-10, Color : "#ff0000"}). show ();} else {var del_icon = $ ( "<i id = 'del-curve-icon'class = 'fa fa-scissors'> </i>")). css ({position : "aperute", e.pagey-obj.offset (). e.pagex-obj.offset (). Left-10, Color : "#ff0000", fontsize : "20px"}); obj.parent (). 부록 (del_icon);} del_cur ve.xaxis = $ ( "#del-curve-icon"). offset (). left; del_curve.yaxis = $ ( "#del-curve-icon"). offset (). top;} // 그런 다음 ($ (this) .attr ( "start")! = undefined && $ (this) .attr ( "end")! = undefined) {// 투명도 $ ( "svg .node"). 각 (function () {this.setAttribute ( "불투명", "0.1"); in_node_id = link.input.nodeid; var out_node_id = link.output.nodeid; $ ( "#"+out_node_id+link.output.pointname+in_node_id+link.input.pointname) [0] .setatt rabute ( "불투명도", "0.1"); obj.children ( "g"). eq (0) .Children ( "g"). eq (0) .fore ($ (this)); $ (this) .attr ( "class", curve Curve-Hover "); var in_node = $ ("#"+$ (this) .attr ("start ")). children ("g "). eq (0) .Children ("circle "). eq (1); in_node.attr ("class ", in_node.attr ("class ")+" Node-Hover "); $ ("#"+$ (this) .attr ("start ")) [0] .setattribute ("불투명도 ","1 "); var out_node = $ ( "#"+$ (this) .attr ( "end")). children ( "g"). eq (0) .children ( "circle"). eq (1); out_node.attr ( "class", out_node.attr ( "class")+" Node-Hover "); $ ("#"+$ (this) .attr ("end ")) [0] .setattribute ("불투명도 ","1 ");}});마우스를 이동하여 트리거 작업을 결정하십시오
$ (Document) .on ( "MousEmove", function (e) {if (del_curve.has_del_curve) {var del_icon_width = $ ( "#del-curve-icon"). width (); var devel_icon_height = $ ( "#del-curve-icon". if (e.pagex <del_curve.xaxis || e.pagex> (del_curve.xaxis+del_icon_width) || e.pagey <del_curve.yaxis || e.pagey> (del_curve.yaxis+del_icon_height)) {del_curve.has_del _del _del _del _del _del _del _del _del _del _del _del _del _del .Node "). 각 (function () {this.setAttribute ("opcacity ","1 ");}); $. 각 (relate.Links, function (l, link) {var in_node_id = link.input.nodeid; var out_node_id = link.output.nodeid; $ ( "#"+out_node_id+link.output.output.pointname+in_node_id+link.input.pointname) [0] .setattribute ( "opacity", "1"); $ ( "#"+ out_node_id+link.output.pointname+in_node_id+link.output.pointname) .attr ( "class", "curve");}); $ (del_curve.ref_curve) .attr ( "class", "curve"); var in_node = $ ( "#"+$ (del_curve.ref_curve) .attr ( "start") out_node = $ ( "#"+$ (del_curve.ref_curve) .attr ( "end")). children ( "g"). eq (0) .Children ( "circle"). eq (1); out_nod e.attr ( "class", out_node.attr ( "class"). 교체 ( "node-hover", ""). trim ()); $ ( "#del-curve-icon"). hide ();}}}).실제로 워크 플로 문제는 곡선을 강조하면 마우스 센터와 마우스 엘리브의 효과가 충분합니다. 그러나 예에서는 곡선에 가위 아이콘을 덮어야하며, 이는 원래 곡선의 마우스 센터 및 마우셀 리브와 충돌합니다. 곡선을 삭제하기위한 트리거 요소는 가위 아이콘이기 때문입니다.