[JavaScript] 동일한 페이지에 여러 통계 차트와 그래픽을 표시하는 방법에 대한 자세한 설명

최근 "애프터 서비스 고객 만족도 설문지"에 고객이 작성한 피드백 답변에 대한 통계를 작성하라는 개발 과제를 받았습니다.

질문의 예는 다음과 같습니다.

• 저희 제품을 마지막으로 구입하신 때는 언제입니까?

• 서비스 직원은 친절하고 성실하게 업무를 수행합니까?

• 저희 회사에서 제공하는 애프터 서비스에 대해 전반적으로 어떻게 생각하시나요?

. . .

구현하고 싶은 기능은 같은 페이지의 각 질문에 대한 각 답변의 총 발생 횟수를 표시하는 보고서를 생성하는 것입니다.

아래 그림과 같이 간단한 효과를 얻었습니다.

물론 6개의 아이콘은 동일한 테스트 데이터를 사용하는데, 이는 주로 동일한 페이지에 여러 차트가 나타나는 문제를 해결합니다. .

효과 테스트는 아래 링크를 이용해주세요. Chrome 개발자 도구를 사용하여 093_chart.html의 구현을 볼 수 있습니다.

휴대폰에서 열기 효과.

코드를 간략하게 검토하세요.

두 ps 각각에는 6개의 캔버스가 포함되어 있습니다. 첫 번째 p는 문제 결과를 6개의 파이 차트로 표시하는 역할을 하고, 두 번째 p의 6개 캔버스는 막대 차트를 표시합니다. 각 캔버스에 !important로 표시된 display:inline 속성을 사용하여 캔버스 노드에 있는 통계 차트가 표시될 때마다 줄 바꿈하는 기본값 대신 왼쪽에서 오른쪽으로 표시되도록 했습니다.

function loaded(){
var totalWidth = getBodyNode().clientWidth;
console.log("width in load: " + totalWidth);
var aCharts = document.getElementsByTagName("canvas");
for( var i = 0; i < aCharts.length; i++){
aCharts[i].width = totalWidth / 6.5;
}
var option = {
type: "pie",
xAxisData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
yAxisData: [12, 19, 3, 5, 2, 3],
yAxisLabel: "Number of Votes"
};
for( var i = 1; i <= 6; i++ ){
createChartOnCanvas("myChart" + i, option);
}
option.type = "bar";
for( var i = 1; i <= 6; i++ ){
createChartOnCanvas("barChart" + i, option);
}
}

41번째 줄은 body 노드의 clientWidth 속성을 통해 현재 창의 전체 너비를 구한 후 이를 6.5로 나눕니다. 몫은 각 통계 차트의 너비입니다. 6이 아닌 6.5로 나누는 이유는 각 행의 통계 차트 사이에 공간을 두기 위함입니다.

통계 차트 유형, X 및 Y 좌표의 데이터 및 레이블은 옵션 개체를 통해 createChartOnCanvas 함수에 전달됩니다.

관련 권장 사항:

Baidu Map JavaScript API 동일한 페이지에 여러 지도를 표시하는 방법

한 페이지에 여러 iChart 보고서 표시

위 내용은 [JavaScript] 동일한 페이지에 여러 통계 차트와 그래픽을 표시하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!