툴팁 포맷터로 차트 만들기

Question

도표를 동적으로 만들려고했지만 내부적으로 그렇게 만들지 못한 내부 포맷터를 만들려고했습니다. 어떤 밝은 아이디어라도?

Answer 1

툴팁 안에 새 컨테이너를 만들고 새 차트를 만듭니다. 중요한 부분은 툴팁이 렌더링 된 후 차트 을 만드는 것입니다. 예를 들어 setTimeout을 사용하십시오. 또한 useHTML: true이 필요하므로 formatter은 SVG가 아닌 HTML 요소를 반환합니다.

작동 데모를 참조하십시오 : http://jsfiddle.net/EtvMR/4/

는 물론, 당신이 공중 선회 지점에 따라 일부 데이터를 얻을 필요합니다,하지만 예제에서 나는 정적 데이터를 사용하고 있습니다.

$('#container').highcharts({ 
    tooltip: { 
     useHTML: true, 
     formatter: function() { 
      setTimeout(function() { 
       $("#hc-tooltip").highcharts({ 
        series: [{ 
         data: [12, 12] 
        }] 
       }); 
      }, 10) 

      return '<div id="hc-tooltip"></div>'; 
     } 
    }, 
    series: [{ 
     type: 'column', 
     data: [29.9, 71.5] 
    }] 
});