Google 차트를 사용하여 가족 선택?

Question

비 플래시 Google 차트 시각화에 대해 글꼴 패밀리를 설정할 수 있습니까? 특히 차트 축의 텍스트와 같은 것들. Google 차트는 강력하지만 추악합니다. 불행히도 나는 그래프 엘과 같은 더 좋은 것으로 이동할 수 없습니다.

Answer 1

살펴보십시오 텍스트 스타일 속성, 예를 들어 테이크하십시오 hAxis.textStyle:

hAxis.textStyle: { color: '#FF0000', 
                   fontName: 'Arial', 
                   fontSize: '10' }

Answer 2

다음과 같이 글꼴 패밀리를 변경할 수 있습니다 : Fontname : 'Arial'

Answer 3

따라서 이것들은 기술적으로 정확한 답변이지만 약간의 컨텍스트를 추가하고 싶었습니다 (적절한 평판이 없어서 의견을 추가 할 수 없었습니다).

1. 객체 표기법을 사용하여 모든 것에 대한 텍스트 스타일을 전달하는 것은 훌륭하고 Google의 POV의 차트 요소 스타일링에 선호되는 방법이지만 궁극적으로 Google이 글꼴 리포지토리에 넣는 글꼴 선택에 의해 제한됩니다. 따라서 Google에는 저장소에이를 가지고 있지 않기 때문에 Segoe UI를 보여주는 예 중 하나는 작동하지 않습니다. 사무실 패브릭 UI 애플리케이션 내에서 차트 API를 사용하고 있기 때문에 불행한 일입니다.
2. 다른 사용자는 CSS를 통해 스타일링을 제안했습니다. 이것은 작동하지만 화면에만 작동합니다. 내가 찾은이 그래프를 인쇄하는 유일한 방법은 PNG로 렌더링하는 것입니다. 이 방법. 그러나 물론 DOM 요소에서 구성된 것을 잡는 것만으로도 얻습니다. CSS를 고려하지 않으므로 인쇄는 예측할 수없는 경향이 있습니다.

내 해결책은 차트가 "준비된"상태로 들어간 후에로드 된 jQuery를 사용하여 SVG 컨테이너 내의 요소를 직접 변경하는 것이었지만 PNG로 렌더링하기 전에 :

google.visualization.events.addListener(chart,'ready',function(){
    var titleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(1)');
    var subtitleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(2)');
    var tooltipText = $('[chart-container] > div > div > svg > g > g').find('text');
    var tooltipStyle = {'font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif'};
    var otherText = $('g > text');
    var textStyle = {'font-family':"'Segoe UI SemiLight WestEuropean','Segoe UI SemiLight','Segoe WP SemiLight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif"};
    var titleStyle = {'font-size':'21px','font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif',fill:'#333'};
    var titlePos = {x:20,y:30};
    var subtitleStyle = {'font-size':'17px','font-family':"'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif",fill:'#666'};
    var subtitlePos = {y:50,x:20};
    tooltipText.css(tooltipStyle);
    otherText.css(textStyle);
    titleText.css(titleStyle).attr(titlePos);
    subtitleText.css(subtitleStyle).attr(subtitlePos);
});

아마도 그 모든 것을 할 수있는 더 깨끗한 방법이있을 것입니다 (나는 최선을 다해 해킹하는 코더입니다). 나는 당신이 호버링 할 때 글꼴을 되돌리고 툴팁이 스타일이 제대로 작동하지 않는 것처럼 여전히 해결해야 할 몇 가지 문제가 있습니다. 화면에 표시된 내용과 필연적으로 사용자가 인쇄하려는 것 사이의 일관성을 보장하는 가장 좋은 방법.