dygraph에서 drawed point를 선택하십시오.

Dygraph에서 drawPointCallback 함수를 사용하여 사용자 정의 도형을 그립니다. 위대한 작품, 이제 사용자가 그 같은 사용자 정의 그리기 모양을 선택할 수 있기를 바랍니다. 그것들은 오염 된 영역의 직사각형 영역이므로, 사용자가 그러한 영역을 클릭 할 수 있고 예를 들어 점등된다면 좋을 것입니다.dygraph에서 drawed point를 선택하십시오.

다이 그래프로이 작업을 수행 할 수있는 방법이 있습니까? 현재 왼쪽 상단 모서리에서 클릭 할 수있는 지점 만 있습니다 (실제 지점). 이 방법이 효과적 일지는 모르지만 그다지 직관적이지는 않습니다.

출처

2014-11-18 Elger Mensonides

highlightCircleSize 옵션은 pointClickCallback을 트리거하는 지점까지의 클릭 수를 제어합니다. 또한 차트 위로 마우스를 가져 가면 강조 표시 원의 크기가 조절되지만 자신 만의 drawPointCallback 및 drawHighlightPointCallback을 구현하기 때문에이 동작을 무시할 수 있습니다.

g = new Dygraph(document.getElementById("graph"), 
 
       // For possible data formats, see http://dygraphs.com/data.html 
 
       // The x-values could also be dates, e.g. "2012/03/15" 
 
       "X,Y,Z\n" + 
 
       "1,0,3\n" + 
 
       "2,2,6\n" + 
 
       "3,4,8\n" + 
 
       "4,6,9\n" + 
 
       "5,8,9\n" + 
 
       "6,10,8\n" + 
 
       "7,12,6\n" + 
 
       "8,14,3\n", 
 
       { 
 
        // options go here. See http://dygraphs.com/options.html 
 
        legend: 'always', 
 
        animatedZooms: true, 
 
        title: 'dygraphs chart template', 
 
        highlightCircleSize: 10, 
 
        pointClickCallback: function(e, pt) { 
 
         alert(JSON.stringify(pt)); 
 
        }, 
 
        drawPoints: true, 
 
        drawPointCallback: Dygraph.Circles.HEXAGON, 
 
        drawHighlightPointCallback: Dygraph.Circles.HEXAGON 
 
       });

/* 
 
Relevant CSS classes include: 
 

 
Labels on the X & Y axes: 
 
.dygraph-axis-label 
 
.dygraph-axis-label-x 
 
.dygraph-axis-label-y 
 
.dygraph-axis-label-y2 
 

 
Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html 
 
.dygraph-title 
 
.dygraph-xlabel 
 
.dygraph-ylabel 
 
.dygraph-y2label 
 

 
The legend, see http://dygraphs.com/tests/series-highlight.html 
 
.dygraph-legend 
 
*/ 
 
.dygraph-title { 
 
    color: gray; 
 
}

<script src="http://dygraphs.com/dygraph-dev.js"></script> 
 
<div id="graph"></div>

클릭 포인트가 경고를 트리거 :

g = new Dygraph(div, data, { 
        highlightCircleSize: 10, // <-- 10px radius click target 
        pointClickCallback: function(e, pt) { 
        alert(JSON.stringify(pt)); 
        }, 
        drawPoints: true, 
        // Set these to draw whatever custom shape you like: 
        drawPointCallback: Dygraph.Circles.HEXAGON, 
        drawHighlightPointCallback: Dygraph.Circles.HEXAGON 
       });

는 여기에 조각입니다.

출처

2014-11-18 15:27:16 danvk

dygraph에서 drawed point를 선택하십시오.

답변

관련 문제