하이 차트의 툴팁 사용자 정의 배경 도형 그리기

Question

내가 작업중인 프로젝트에 하이 차트/스택 차트를 사용하도록 요청 받았습니다. 우리 아티스트는 우리가 사용하고있는 다른 구성 요소와 일치하는 모양과 느낌을 디자인했습니다. 탐색기에서 툴팁과 핸들의 모양과 크기를 변경해야합니다. 기본적으로 차트를 스킨해야합니다.

우리는 이미 하이카에 전념 했으므로이 단계에서는 다른 차트 라이브러리를 사용할 수 없지만 이것이 가능하지 않다면 이는 우리를위한 딜 브레이커가 될 것입니다.

Stackcharts 문서 상태이 :

핸들 : 개체 확대 된 영역을 드래그 용 핸들에 대한 옵션을 선택합니다. 사용 가능한 옵션은 backgroundColor 및 borderColor입니다.

이 충분 :(하지 않습니다 나는 또한이 코드와 함께 사용자 지정 도구 설명을 그리기 시도

:

 tooltip: { 
      useHTML: true, 
      formatter: function() { 
       var st = '<div style="background-color:#ff8000"><svg version="1.1" width="55" height="55"><path d="m 27.7 3.9 C 13.5 3.9 1.9 15.4 1.9 29.6 C 1.9 43.8 13.5 55.3 27.7 55.3 C 41.9 55.3 53.4 43.8 53.4 29.6 C 53.4 15.4 41.9 3.9 27.7 3.9 Z M 21.8 14.8 C 22 14.7 22.2 14.8 22.3 14.8 C 23.8 15.3 24.2 18 23.2 20.9 C 22.3 23.9 20.4 25.9 19 25.5 C 17.5 25 17.2 22.3 18.1 19.3 C 18.9 16.7 20.5 14.9 21.8 14.8 Z M 29.7 14.9 C 31.6 14.9 33.9 17.1 35.2 20.3 C 36.8 23.9 36.5 27.5 34.6 28.4 C 32.7 29.2 29.8 26.9 28.3 23.2 C 26.7 19.6 27 16 28.9 15.1 C 29.2 15 29.5 15 29.7 14.9 Z M 49.3 28 L 48.6 29.4 C 44.2 37.2 38 43.8 31.3 46.3 C 27.9 47.5 24.5 47.7 21.1 46.5 C 17.8 45.2 14.6 42.6 11.7 38.2 L 11.2 37.3 L 12.2 37.4 C 31.3 39.8 38.2 33.4 47.9 28.7 L 49.3 28z" fill="#ffdd55" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="0"></path></svn></div>'; 
       return st; 
      } 
     } 

http://jsfiddle.net/pdDk4/

하지만 SVG 국경에 그려 도착하고 '아무튼입니다 내가 그것을 해킹하지 않고 대체 할 수있는 것처럼 보이지 않는다. (

나는 그것을 원하지 않는다 :

나는 수 시간 동안 조사를했고 고글을했다. 성공하지 못했다. 내가 이것을 어떻게 성취 할 수 있는지 아는 사람이 있습니까?

제발, 내가 morrr 사용자 정의 할 수 있습니까?

Answer 1

useHTML을 true로 설정하면 CSS에서 배경을 설정할 수 있습니다.

http://jsfiddle.net/pdDk4/5/

formatter: function() { 
       var st = '<div class="tooltip">'+this.y+'</div>'; 
       return st; 
      } 

CSS : IE < 8 툴팁이 표시되지 않기 때문에 나이가 browseres는 VML을 사용하기 때문에,이 방법으로 SVG를 사용하지 않도록

.tooltip { 
    width:200px; 
    height:200px; 
    background:url('http://aeseda.psu.edu/wp-content/themes/theme-mingle/assets/images/placeholder.jpg'); 
} 

I 조언.

Answer 2

중요한 점은 내가 사용자 지정 모양을 배경으로 그리는 것이 필요하다는 것입니다. 올바른 해결책은 사용자 정의 모양을 그리기 위해 raphaeljs 또는 비슷한 것을 사용하는 것입니다.

간단히하기 위해 필자는 솔루션을 반영하기 위해 바이올린을 업데이트했습니다. 그것은 원래 코드와 많이 다르지 않지만 처음 질문을했을 때 술에 빠졌음에 틀림 없습니다. 여기에 업데이트 바이올린입니다 :이

http://jsfiddle.net/pdDk4/

당신은 당신의 툴팁을 배경으로 사용자 정의 모양을 그릴 수 있습니다. IE8에서는 작동하지 않지만 raphaeljs와 같은 것을 사용하면 SVG 모양을 VML로 변환 할 수 있습니다.

formatter: function() { 
    var st = '<svg version="1.1" width="55" height="55"><path d="m 27.7 3.9 C 13.5 3.9 1.9 15.4 1.9 29.6 C 1.9 43.8 13.5 55.3 27.7 55.3 C 41.9 55.3 53.4 43.8 53.4 29.6 C 53.4 15.4 41.9 3.9 27.7 3.9 Z M 21.8 14.8 C 22 14.7 22.2 14.8 22.3 14.8 C 23.8 15.3 24.2 18 23.2 20.9 C 22.3 23.9 20.4 25.9 19 25.5 C 17.5 25 17.2 22.3 18.1 19.3 C 18.9 16.7 20.5 14.9 21.8 14.8 Z M 29.7 14.9 C 31.6 14.9 33.9 17.1 35.2 20.3 C 36.8 23.9 36.5 27.5 34.6 28.4 C 32.7 29.2 29.8 26.9 28.3 23.2 C 26.7 19.6 27 16 28.9 15.1 C 29.2 15 29.5 15 29.7 14.9 Z M 49.3 28 L 48.6 29.4 C 44.2 37.2 38 43.8 31.3 46.3 C 27.9 47.5 24.5 47.7 21.1 46.5 C 17.8 45.2 14.6 42.6 11.7 38.2 L 11.2 37.3 L 12.2 37.4 C 31.3 39.8 38.2 33.4 47.9 28.7 L 49.3 28z" fill="rgba(255, 150, 0, 0.8)" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="0"></path></svn><div style="position:absolute;left:10px;top:10px">this.y =' + this.y + '<div>'; 
    return st; 
    }