구글 차트 API - 설정 게이지 차트 글꼴 크기 나는 구글 차트 API에 의해 생성 된 계기 차트의 글꼴 크기를 설정할 수 있도록하고 싶습니다

은 - https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge 구글 차트 API - 설정 게이지 차트 글꼴 크기 나는 구글 차트 API에 의해 생성 된 계기 차트의 글꼴 크기를 설정할 수 있도록하고 싶습니다

는 API의 옵션이있을 것 같지 않습니다 그래서 차트가 그려진 후에 SVG를 조작 할 수 있기를 원합니다. 나는 이것이 jQuery SVG 플러그인으로 가능할 것이라고 생각한다. - http://keith-wood.name/svg.html

나는 SVG를 그린 후 플러그인을 사용하여 SVG를 업데이트하는 방법에 대해 약간 고심했다. 방화 광을 사용하여 차트가 그려진 후 html이 이렇게 보입니다.

$('#gaugeChartDiv #chartArea').svg('get').change('text:first', { 'font-size' : 8 });

를하지만 그런 식으로 작동하지 않습니다

<iframe> 
    <html> 
     <head>...</head> 
     <body> 
      <div id="chartArea"> 
       <svg> 
        <g> 
         //a couple of circles 
         <text></text> //The first text element is the title 
         //the rest of the graph 
        </g> 
       </svg> 
      </div> 
     </body> 
    </html> 
</iframe>

나는 이런 식으로 뭔가를 쓸 수 있도록하고 싶습니다. 누구든지 조언을 해줄 수 있습니까?

출처

2012-08-31 user1573618

그래, 플러그인이 없으면 jQuery로 SVG를 조작 할 수있다. 문제는 iframe에서 요소를 선택하는 것이 었습니다. 다음 코드를 사용하여 글꼴 크기를 업데이트 할 수 있습니다.

$('#gaugeChartDiv iframe').each(function() { 
    $('#chartArea svg text:first', this.contentWindow.document||this.contentDocument).attr('font-size', 8); 
});

출처

2012-08-31 11:50:49 user1573618

/* for gauge indicators text */ 
    .gauge svg g text { 
    font-size: 18px; 
    } 
    /* for middle text */ 
    .gauge svg g g text { 
    font-size: 24px; 
    }

출처

2016-07-12 20:22:47

당신은 CSS를 통해 작업을 수행 할 수 있습니다

svg:first-child > g > text[text-anchor~=middle]{ 
    font-size:9px; 
}

출처

2016-09-06 18:35:54 user2755541

최고, 감사합니다! –

완벽하게 작동합니다! 10 배! –

구글 차트 API - 설정 게이지 차트 글꼴 크기 나는 구글 차트 API에 의해 생성 된 계기 차트의 글꼴 크기를 설정할 수 있도록하고 싶습니다

답변

관련 문제