일부 구성이 낮은 휴대폰에서 대화형 히스토그램이 작동하지 않는 경우 사용자 지정 컨트롤로 대체하여 해결했습니다.

2

다음 레이아웃을 사용하여 새 사용자 지정 컴포넌트를 만듭니다

wxml

공식 문서에 따르면 canvas2d로 그리는 것이 가장 좋습니다.

셋째

예제...

선택자 쿼리를 통해 캔버스 객체를 가져오고, 여기서 in 메서드는 사용자 정의 컴포넌트의 노드를 가져오는 데 사용됩니다.

node 속성은 캔버스 객체인 노드 인스턴스를 가져오는 데 사용되며, size는 캔버스의 너비와 높이인 노드 크기를 가져오는 데 사용됩니다. 여기에는 함정이 있습니다. 노드를 통해 얻은 캔버스의 너비와 높이는 캔버스의 너비와 높이일 뿐입니다. 실제 기기에서 제대로 표시하려면 휴대폰의 밀도를 구하고 밀도에 캔버스의 너비와 높이를 곱해야 하며, 캔버스 컨텍스트는 화면 밀도 배율도 함께 스케일링합니다.

공식적으로 픽셀 비율로 설명되는 픽셀 비율은 안드로이드 개발 시 1픽셀이 1dp에 해당하는 픽셀 수입니다.

넷째

히스토그램을 그리는 것은 그리 복잡하지 않으며, 통계 그래프에는 많은 요소가 있습니다.

첫 번째는 제목입니다. 제목이 필요한 경우 제목을 그릴 때 제목 스타일을 지정한 다음 제목 주위에 필요한 여백을 남겨야 합니다. 그런 다음 제목을 그릴 때 사용한 방법과 다른 방법을 사용할 수 있습니다.

축, 축 원점의 위치를 확인하고 축 이름의 위치와 눈금 이름의 위치를 예약하는 것을 고려합니다.

데이터를 가져올 때는 데이터와 관련된 부분, 즉 새로 고침 방법을 그립니다.

동적으로 새로 고쳐야 하는 경우, js 캔버스에서 원본 캔버스 콘텐츠를 지워야 하므로 명확한 메서드가 있어야 합니다.

V

큐 캔버스를 통계 캔버스에 오버레이하고 캔버스를 화면 밀도에 맞게 조정해야 합니다. 동시에 통계 캔버스와 동일한 좌표계 세트를 초기화합니다.

화면 클릭 이벤트 바인드 터치스타트를 바인딩하여 화면 클릭 시 클릭 위치를 기록하고 큐 바를 표시합니다.

여섯

손가락으로 화면을 스와이프하면 스와이프 거리의 변화에 따라 페이지 새로 고침을 트리거하고 캔버스를 계산하여 필요에 따라 새로 고침이 필요한지 캔버스에 알려주는 이벤트 bindtouchmove를 수신합니다.

참고용 소스 코드를 참조하세요.