캔버스의 깃발 축 레이블 위치

Flots 0.8.1을 사용하여 Rails 3.2.11 앱을 구축 중입니다. Prawn을 사용하여 Flot 차트를 PDF로 렌더링하고 싶습니다. (.getCanvas 및 .toDataURL 메서드를 사용하여 이미지 데이터를 서버에 아약스로 전달합니다. 브라우저에서 플롯 차트를 jquery.flot.canvas 덕분에 캔버스에 축 레이블을 사용하여 정확하게 렌더링합니다. js 플러그인.캔버스의 깃발 축 레이블 위치

나는 넓은 바 barcharts을 오전 문제

. 내 x 축 레이블을 막대 아래에 중앙에 배치하고 틱 라인 아래에 중심에두기를 원합니다 (왼쪽에서 약간 멀리 보입니다). 나는 캔버스에 내 축 레이블을 넣어 전에 (NO jquery.flot.canvas.js 플러그인으로 HTML 라벨을 사용하는 경우 즉,)

, 나는 지금과 같이 SCSS와

.flot-x-axis { 
    .tickLabel { 
    font-size: 10px; 
    padding-left: 16px;  // Nudges x-axis labels to the right 
    } 
}

그들을 스타일링했다, 캔버스 위의 레이블을 렌더링하면 위의 SCSS는 x 축 레이블을 오른쪽으로 이동하지 않습니다. 이상하게도, font-size : 스타일링 은입니다 만, 패딩 왼쪽 :는 효과가 없습니다. 패딩을 적용 할 적절한 선택기를 찾을 수없는 것 같습니다.

감사합니다. 감사!

업데이트

나는 정렬 사용하고 있습니다 : '센터'내 코드에 옵션을하지만, 정렬 것처럼 즉, 같은 영향을 (이하지 않는 것 '센터' 생략). How to use Flot canvas plugin을 참조하십시오. FWIW, 시간 기반 데이터를 사용하고 있습니다. 나는이 비슷한 문제가 있습니다처럼 보이는

, Flot bar chart month alignment issue

jsFiddle here. 참고 : FireFox에서는 정상적으로 렌더링되지만 Chrome에서는 정상적으로 렌더링되지 않습니다.

물론 jsFiddle에서는 정상적으로 작동하지만 내 코드에서는 정상적으로 작동하지 않습니다. 내 눈을 날카롭게해야한다고 생각해!

출처

2013-05-24 Peter Bloom

문제를 나타내는 jsFiddle을 만들 수 있습니까? – Mark

jsFiddle 게시했습니다. –

Flot Canvas 플러그인은 CSS로 할 수있는 일의 부분 집합 만 인식합니다. 일반적으로 텍스트 스타일과 관련된 모든 것을 인식합니다. 글꼴 종류, 크기, 스타일, 간격 및 색상. 패딩, 여백 등의 상자 모델 규칙을 인식하지 못합니다.

바늘 align: center 옵션을 사용하는 것이 좋습니다.

출처

2013-05-24 20:59:30 DNS

내 jsFiddle에서 작동했습니다. 감사! –

'align : center'는 한 점까지 작동합니다. 그리드 선을 기준으로 막대를 정렬합니다. 격자 선 사이에 "레이블"이 정렬되도록 레이블을 정렬하는 방법을 정말 좋아할 것입니다. 내게는 막대가 격자 선의 가운데에 놓여 있다는 것이 이상하게 보입니다. –

당신은 Rob과 같습니다. 격자를이 속성으로 세로로 사라지게 만들었습니다. 'xaxis : {tickLength : 0}' – YoyoS

캔버스의 깃발 축 레이블 위치

답변

관련 문제