2012-10-28 11 views
2

그래서 ColumnChart이 있으며 기본 제공 기능 중 하나는 차트의 범례에서 항목 (소위 카테고리) 위로 마우스를 가져 가면 강조 표시가 나타납니다. 차트의 해당 열을 경계로Google Chart API : 호버링 범례의 색상 변경

이제 차트에 많은 열과 카테고리가 표시되며 강조 표시된 시리즈/카테고리는 매우보기 힘듭니다. 기본 동작은 열 주변에 1x 회색 테두리 만 표시하기 때문입니다. 내 열은 너비가 약간 픽셀이고 10 가지 카테고리 (= 색상)를 구별해야합니다. 그래서 매우 가벼운 색상 (국경이 쉽게 발견 될 수있는 곳) 만 선택하는 것은 선택 사항이 아닙니다. 나는 변화의 방법을 발견했습니다

  1. 하이라이트 국경 (주로 색)의 스타일 또는 각각의 카테고리가 선택되어
  2. 컬럼의 색 (색 채우기) 전설.

내 차트의 draw() 호출로 전달할 수있는 속성이 있습니까? 일부 이벤트/메소드를 수동으로 대체해야합니까?

도움 감사합니다.

답변

6

이전에는 생성 된 SVG (경로, rect 등 ...)의 일부 속성을 변경하기 위해 CSS 해킹을 사용했습니다. 고급 선택자로 재생할 수 있으며, 필요. 나는 매우 빠르고 버그가있는 예제를 만들었지 만 올바른 방향으로 여러분을 안내 할 것입니다. 예를 들어

:

div.google_chart svg g g g g rect { 
      stroke-width:0px; fill:red; 
      } 

는 도움이되기를 바랍니다.

+1

오 세상에 실제로 작동합니다. 정말 고맙습니다. 코드에서 마우스를 가져 가면 현재 선택된 열이 하이라이트됩니다. 전설에 마우스를 올리면 다음 코드가됩니다 :'div.google_chart svg g g g rect { stroke-width : 0px; 기입 : 빨간색; }'- 이것은 SVG 트리를 탐색합니다. 멋지다! 어쩌면 당신의 대답을 업데이트 할 수 있습니다. 그래서 바로 발견 할 수 있습니다. 그리고 다시 : 감사합니다! –

+0

쿨 피터! 다행히 올바른 CSS를 찾을 수있었습니다! 내가 말한 것처럼 내 대답을 업데이트하여 즉시 발견하고 jsfiddle 링크를 삭제했습니다. 어떻게 든 올바른 것이 아니 었습니다. 다행스럽게 도울 수있어! 건배 – CMoreira

+0

CMoreira, 당신은 정말로 나를 도왔습니다. 그것은 완벽합니다, 그것은 나를 많이 구해 줬습니다. – misco