하이 차트 - 고급 툴팁 기능이 필요합니다.

Question

스태킹 기능이있는 영역 그래프를 사용하여 플로팅 할 때 문제가 있습니다. 내가 여기서 질문 한 마지막 질문은 다음과 같다. Highcharts help - Area chart stacking

기본적으로 데이터를 정규화하지 않고 값을 플롯 (plot)하는 방법을 묻는 질문이다. 그래프를 올바르게 표시하기 위해 다른 계열에서 하나의 계열을 뺄 수 있다고 들었지만이 계산 때문에 마우스를 올리면 값이 왜곡됩니다.

예 : 하기 전에 :

Series Total:  [0,0,0,1,1,2,3] 
Series In-Service: [0,0,0,0,0,1,2] 

그래서 나는 그것을 그래프로 데이터를 수정 :

는

Series Total:  [0,0,0,1,1,1,1] 
Series In-Service: [0,0,0,0,0,1,2] 

지금은 잘 그래프 그러나 도구 설명 마지막 데이터 포인트는 예를 들어, 잘못한다입니다

Series Total:  3 
Series In-Service: 2 

을하지만 보여줍니다 : 수

Series Total:  1 
Series In-Service: 2 

그리고 도구 설명에 다른 지점에 대한 액세스 권한이 없으므로 표시하기 위해 수정 계산을 수행 할 수 없습니다. shared : true를 사용하지 않는 한, 내가 가지고있는 모든 시리즈로 인해 툴팁이 너무 크기 때문에 공유를 사용할 수 없습니다.

내가 명확하지 않은 경우 궁금한 점이 있으면 정말 도움이 필요합니다.

Answer 1

아마 최적되지는 않지만, 나는 비슷한 상황에서 다음을 수행했습니다 내 설정에서

, 내가 설치를 포인트 이름을 사용하는 툴팁 포매터를했습니다.

tooltip: { 
    formatter: function() { 
    return this.point.name; 
    } 
} 

그리고 포인트를 추가 해요로 한 후, 나는 단지에서 ...

// get x, y and other vars 
series[0].addPoint({x: x, y: y, name: 'In Service: ' + inService }, false); 
series[1].addPoint({x: x, y: y, name: 'Total: ' + total }, false); 

으로 내 사용자 정의 HTML로 이름을 설정 물론 당신이에 대한 조정되지 않은 값을 사용 합계.

Answer 2

시리즈 데이터를 설정할 때 개체 목록을 사용하십시오. 데이터 포인트 객체에 옵션을 추가하고 툴팁 포맷터에서 액세스 할 수 있습니다.

예를 들어 http://jsfiddle.net/jgdreyes/JvSBk/을 참조하십시오.

var seriesTotal = [ 
    {x: 0, y: 0, customTooltip: 0}, 
    {x: 1, y: 0, customTooltip: 0}, 
    {x: 2, y: 0, customTooltip: 0}, 
    {x: 3, y: 1, customTooltip: 1}, 
    {x: 4, y: 1, customTooltip: 1}, 
    {x: 5, y: 1, customTooltip: 2}, 
    {x: 6, y: 1, customTooltip: 3} 
]; 

var chart = new Highcharts.Chart({ 

    series: [ 
     {data: seriesTotal} 
    ], 

    tooltip: { 
     formatter: function() { 
      //access customTooltip option 
      return this.point.customTooltip; 
     } 
    }, 
});