그래프 위에 jQuery 플로트 데이터/축 레이블

Question

X 축 및 Y 축 숫자 라벨을 jQuery 플로트 그래프에 오버레이하는 방법이 있습니까? 따라서 라벨이 외부, 그래프 옆에 있고 그래프 자체 위에 있지 않기를 원합니다.

다음 예제는 주석을 위해 그래프 위에 오버레이 div를 만듭니다.http://people.iola.dk/olau/flot/examples/annatating.html

플로트 내에서 축의 텍스트와 형식을 잡고 그러한 오버레이를 만들 수있는 간단한 방법이 있습니까? 아니면 그래프 위에 축 레이블을 오버레이하는 또 다른 더 나은 방법이 있습니까?

Answer 1

특히 깨끗하지 않고 특히 X- 및 y 축 틱 레이블을 동시에 보여줄 계획이라면 잘 작동하지 않는 한 가지 방법은 다음과 같습니다. labelMargin 옵션 grid 음수 값으로.

var plot = $.plot(placeholder, data, {
    ...
    grid: { ..., labelMargin: -20, ... }
    ...
});

---

두 번째 아이디어는 모든 것을 잡는 것입니다 div가지고있는 것 class="tickLabel" 그래프가 그려진 후. 그런 다음 "수동으로"CSS 위치를 변경합니다.

$("div.tickLabel").each(function(i,ele) {
    ele = $(ele);
    if (ele.css("text-align") == "center") { //x-axis
        ele.css("top", ele.position().top - 20); //move them up over graph
    } else {  //y-axis
        ele.css("left", ele.position().left + 20); //move them right over graph
    }
});

물론 이것은 X- 및 y 축에서 가장 낮은 진드기 레이블 값이 서로 겹치며 x- 및 y 축의 가장 낮은/가장 높은 진드기 레이블 값이 그래프의 가장자리에 위치 할 수 있기 때문에 여전히 몇 가지 문제가 있습니다. . 그러나 약간의 미세 조정으로 이것은 실행 가능한 솔루션 일 수 있습니다.

---

세 번째 아이디어는 직접 사용하는 것입니다 tickFormatter X- 및 y 축의 진드기 라벨 용. 이것은 두 번째 아이디어와 비슷하지만 두 번째 아이디어에서 기능으로 발생할 수있는 재배치에 대한 눈에 띄는 "레이블 깜박임"이 없을 수도있는 곳에 직접 배치 할 수 있습니다.

var plot = $.plot(placeholder, data, {
    ...
    xaxis: {
        ...,
        tickFormatter: function formatter(val, axis) {
           //return appropriately absolute positioned element
        }
    },
    ...
});

이것 어때 tickFormatter 기능은 JQuery Flot Sourcecode 특히 기능 measureLabels (이것은 플로트 자체가 진드기 라벨을 어떻게 배치하는지 알 수 있습니다)와 기본 틱 포맷터는

function (v, axis) {
    return v.toFixed(axis.tickDecimals);
};