Google 시각화 차트에서 CSS 플로트 속성 사용

Google 시각화 도구와 PHP 백엔드 서버를 사용하여 여러 원형 차트를 만들었습니다. 잘 작동합니다.Google 시각화 차트에서 CSS 플로트 속성 사용

그러나 컨테이너 div (특히 float : left 스타일)에 간단한 인라인 스타일을 추가하면 차트의 상호 작용이 모두 손실됩니다. 그것은 괜찮아요, 그냥 마우스 오버 또는 툴팁 (정상적인 GVis 동작)와 팝업 때 아무것도 강조 표시되지 않습니다.

기본적으로 기술적으로 어떤 일이 벌어지고 있는지 궁금 해서요. 최종 결과는 나란히 두 번째 원형 차트와 세 번째 원형 차트가 있어야합니다.

감사합니다.

다음은 향후 작업을 위해 작동하는 Div 구조 및 CSS 마크 업입니다.

<div id="firstLineofCharts"> 
    <div id="chart1" style="display:inline-block; width:400px; height:350px;"></div> 
    <div id="chart2" style="display:inline-block; width:400px; height:350px;"></div> 
</div> 
<div id="secondLineofCharts" style="float:clear"></div>

당연히 id와 클래스를 사용하여 전체 CSS 마크 업으로 변환 할 수 있습니다.

출처

2011-12-07 Josh

페이지를 생성하는 샘플 코드와 페이지의 관련 html/css를 붙여 넣을 수 있습니까? – oli

가지고 계신 CSS 수정 사항을 정확하게 공유 할 수 있습니까? 나는 같은 것을하려고 노력하고 있는데 어떤 클래스가 디스플레이를 추가하는지 알아낼 수 없다 : 인라인 블록; 에. 감사. –

@MikeSimmons 코멘트에 대한 편집 된 질문입니다. – Josh

이후에 clearfix를 수행 했습니까? 또는 div에 다음 스타일을 적용하고 효과를 비교할 수 있습니다.

display: inline-block;

출처

2011-12-07 14:02:47

나는 다음 div에 이미 명확한 것을 가지고 있었다. 내가 제안한 "display : inline-block"으로 바꿨다. 감사. float가 작동하지 않는 이유는 무엇입니까? – Josh

잘 모르겠다. 나는 GVis와 함께 일한 적이 없어서 모르겠다. 아마 어둠 속의 한 장면일지도 모르지만, 아마도 맨 위에 상호 작용을위한 여분의 레이어를 렌더링하는 스크립트가있을 것입니다. 그래서 플로트를 사용하면 레이아웃의 흐름을 엉망으로 만들 수 있습니다. –

그건 의미가 있습니다. 감사. – Josh

Google 시각화 차트에서 CSS 플로트 속성 사용

답변

관련 문제