플로팅 툴팁이있는 플로트의 예가 있습니까?

StackOverflow https://stackoverflow.com/questions/445482

문제

나는 현재 a 플로트 그래프, API 고급 사용의 예는 널리 문서화되어 있지 않지만 전반적으로 강력 해 보입니다.

API는 그래프에서 호버링 가능한 설정 방법이 있다고 제안합니다.

나는 누군가가 만나는 몇 가지 예 또는 그 문제에 대한 코드를 기여할 수 있는지 알고 싶습니다. 이는 다음 중 하나의 예를 보여줍니다.

  • 플로트 차트 요소의 이벤트를 통해 호버로 트리거 된 동적 툴팁
  • 진드기 툴팁 (xaxis 쇼 세부 사항 위로 호버링)
  • Flot을 사용한 모든 종류의 호버 오버 / 동적 이벤트 바인딩

내가 찾고있는 효과는 비슷합니다 이것 오픈 플래시 차트 예제

도움이 되었습니까?

해결책

살펴보십시오 이 플로트 예제 차트의 플롯 포인트에 대한 툴팁을 보여줍니다. (당신이 선택하십시오 툴팁을 활성화합니다 확인란.)

다른 팁

간단한 툴팁 플러그인도 있습니다. 찾을 수 있습니다. 여기

또한 플러그인에 몇 가지 기능을 추가하면 GitHub에서 찾을 수 있습니다.https://github.com/skeleton9/flot.tooltip

http://data.worldbank.org 플로트를 사용하여 제작되었으며 툴팁을 사용합니다.

Simon의 답변의 링크는 플로팅 툴팁과 함께 사용할 고리를 제공하는 데 매우 효과적이었습니다. 그러나 나는 호버 영향을 달성하기 위해 코드를 파고 잘라야한다는 것을 알았습니다. 결과는 다음과 같습니다 (기본적으로 구두로 http://people.iola.dk/olau/flot/examples/interacting.html).

플로트 초기화에서 변경 해야하는 유일한 설정은 옵션 객체에 있습니다. 이것을 옵션 중 하나로 포함해야합니다.

var options = {
 //... : {},
 grid: { hoverable: true }
};

이 함수는 호출 될 때 툴팁 요소를 구성하고 보여줍니다. 매개 변수 x와 y는 플로트 내부의 오프셋이므로 툴팁이 올바르게 위치합니다. 내용은 툴팁에 표시됩니다

function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee'
        }).appendTo("body").fadeIn(200);
    }

이것은 바인드이며 플로트의 자리 표시 자로 사용되는 요소를 사용할 수있는 경우에만 한 번만 호출해야합니다. 이벤트 핸들러를 전선합니다. PreviousPoint는 툴팁을 표시하기위한 플래그로 사용됩니다.

    var previousPoint = null;
    $("#flotPlaceHolder").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(0),
                    y = item.datapoint[1].toFixed(0);

                showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });

툴팁 및 플로트 통합은이 라이브러리를 확인하십시오

https://github.com/krzysu/flot.tooltip

http://craigsworks.com/projects/qtip2/demos/#flot 내가 가장 좋아하는 JS 툴팁 라이브러리입니다. 그것은 꽤 나쁘고 플로트 통합이 있습니다.

데이터 배열에 사용자 정의 데이터를 추가하여이를 사용하여 툴팁을 표시 할 수 있습니다.

내 대답과 전체 예를 참조하십시오.플로트의 한 지점에 호버링 할 때 사용자 정의 툴팁 표시

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top