2014-11-29 4 views
6

아래 이미지에 표시된 툴팁을 공유로 표시하려면 어떻게해야합니까?하이 차트 : 공유 툴팁 포맷터 this.points [i]

당신은 (공유 옵션에 대한, 특히 정보)를 Highcharts API 참조 살펴 걸릴 할 수 있습니다 : 전체 화면에 대한 http://jsfiddle.net/iginisruber/Ltqnab9x/1/

: http://jsfiddle.net/iginisruber/Ltqnab9x/1/embedded/result/

내가하려고 여기 http://api.highcharts.com/highcharts#tooltip.formatter

는 jsfiddle입니다 그러나 작동하지 않았습니다 :

tooltip: { 
 
\t \t \t shared: true, 
 
\t \t \t formatter: function() { 
 
\t \t \t \t var y_value_kwh = (this.points[i].y/1000).toFixed(2); 
 
       return '<span style="font-size: 10px">' + this.key + '</span><br/>' + '<span style="color:' + this.points[i].series.color + '">\u25CF</span> ' + this.points[i].series.name + ': <b>' + y_value_kwh + ' kWh</b><br/>'; 
 
      }, 
 
     },

현재 코드 :

tooltip: { 
 
\t \t \t //shared: true, 
 
\t \t \t formatter: function() { 
 
\t \t \t \t var y_value_kwh = (this.y/1000).toFixed(2); 
 
       return '<span style="font-size: 10px">' + this.key + '</span><br/>' + '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + y_value_kwh + ' kWh</b><br/>'; 
 
      }, 
 
     },

전류 출력 : enter image description here

+0

http://jsbin.com/qatufetiva/1/edit?js,output는 언급에 대한 jsbin.com 또는 jsfiddle.com –

+1

@AlfredoDelgado 덕분에 샘플 차트를 설정합니다. 나는 jsfiddle을 추가했다. 도움을 주신 덕분에 – ignisruber

답변

14

는 공유 툴팁 스택 그래프에 대한 각각의 데이터 포인트를 표시 할

, 당신은 개인 포를 통해 반복해야한다. 도구 팁 마크 업을 빌드합니다.

tooltip: { 
     shared: true, 
     formatter: function() { 
      var points = this.points; 
      var pointsLength = points.length; 
      var tooltipMarkup = pointsLength ? '<span style="font-size: 10px">' + points[0].key + '</span><br/>' : ''; 
      var index; 
      var y_value_kwh; 

      for(index = 0; index < pointsLength; index += 1) { 
       y_value_kwh = (points[index].y/1000).toFixed(2); 

       tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value_kwh + ' kWh</b><br/>'; 
      } 

      return tooltipMarkup; 
     } 
    } 

여기에 동작하는 예제입니다 :

+0

! 툴팁을 좀 더 유연하게 만들어줌으로써 좀 더 움직일 수있는 방법이 있습니까? 이제는 항상 컬럼 가까이에서 항상 가깝게 유지됩니다. 이 영역 차트와 같은 툴팁 : 전체 화면 : http://jsfiddle.net/iginisruber/mp2red0h/ http://jsfiddle.net/iginisruber/mp2red0h/embedded/result/ – ignisruber

+0

http : //api.highcharts로 둘러보기 .com/highcharts # tooltip.positioner –

관련 문제