2012-07-10 3 views
3

jqPlot 선 그래프가 있는데 X 값에 대한 형광펜 텍스트를 사용자 정의하는 방법을 고안하고 있습니다.jqPlot 형광펜 변경 x 값

So. 나는 다음과 같습니다과 제대로 그래프를 표시

var line1=[100, 68, 63, 36, 28]; 
var line2=[100, 71, 68, 42, 32]; 
var line3=[100, 60, 45, 15, 5]; 
var line4=[100, 76, 58, 22, 8]; 
var plot3 = $.jqplot('chart3', [line1,line2,line3,line4], { 
axes:{ 
     xaxis: { 
       ticks: [ [1, 'group1'], 
         [2, 'group2'], 
         [3, 'group3'], 
         [4, 'group4'], 
         [5, 'group5'] 
         ], 
       tickOptions:{ 
         showGridline: false, 
       }, 
      }, 
     yaxis:{ 
      label:'Percentage', 
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
      min : 0, 
      max : 100, 
      pad : 0, 
      numberTicks : 11, 
      } 
    }, 

X 축 읽기 그룹 1 그룹 2 등 ... 그러나 나는 1 호선 틱 위에 형광펜 옵션 예 호버 위해를 추가 할 때 2 개 상자가 표시됩니다 " 2.0, 68 ". 내가하고 싶은 것은 "group2, 68"을 표시하는 것입니다.

formatString 매개 변수로 재생 해 보았지만 작동시키지 못했습니다.

누군가 올바른 방향으로 나를 가리킬 수 있습니까?

감사합니다.

답변

2

제가 해결책을 제시 할 수는 있을지 모르지만, 최선의 해결책이 될 수는 없지만 제가 보여준 코드를 생각해 볼 때 가장 적절하다고 생각할 수 있습니다. 아래 코드를 사용합니다. 기본적으로 모든 마우스 이동에서 neighbour이 null이 아닙니다 (이것은 형광펜 툴팁을 표시하는 데 사용되는 조건 임). 툴팁을 원하는대로 변경합니다. 흥미로운 링크를 보여주는

$("#chart").bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, plot) { 
    if (neighbor) { 
     $(".jqplot-highlighter-tooltip").html("" + plot.axes.xaxis.ticks[neighbor.pointIndex][1] + ", " + datapos.yaxis.toFixed(2) + " Oi"); 
    } 
}); 

For a working code sample please see.

+1

답변 해 주셔서 감사합니다. 이 솔루션은 빠르고 쉽게 사용할 수있었습니다. 그냥 복사/붙여 넣기, "#chart"를 내 것과 일치하도록 변경했습니다. – Jake

1

시도하지 않았다 그러나이 코드는 여기 https://gist.github.com/2422033

을 기대 JqPlot의 문서 highlighter plugin에 대한 링크입니다 무엇을 할 것으로 보인다. tooltipAxes 속성 확인

그리고 여기에는 기본적으로 지원되지 않는 툴팁에 시리즈 이름을 표시하는 솔루션 링크가 있습니다. 의견 # 1을 확인하십시오. https://bitbucket.org/cleonello/jqplot/issue/109/enable-highlighter-tooltip-to-display-label-of-the-series-on#comment-65301

+0

1. ''jqPlot' 스크립트를 피할 수있을 때마다 변경하는 것을 피하기를 선호하지만, 나는 다른 대답을 제시했다. – Boro