집 > 기사 > 웹 프론트엔드 > JavaScript는 데이터를 기반으로 백분율 차트와 히스토그램을 생성합니다.

JavaScript는 데이터를 기반으로 백분율 차트와 히스토그램을 생성합니다.

高洛峰원래의: 2016-11-25 14:06:371213검색

<머리>

JS百分比图和柱状图

<스타일>

v:* {behavior=url(#default#VML)}

<스타일>

a:hover {color:maroon}

h2 {color:#006600;

여백 상단: 0pt;

margin-bottom: 0pt}

h3 {color:#006600;

여백 상단: 6pt;

margin-bottom: 3pt}

h4 {color:#006600;

글꼴 계열: Arial;

글꼴 크기: 10pt;

여백 상단: 3pt;

margin-bottom: 0pt}

h5 {color:#006600;

여백 상단: 0pt;

margin-bottom: 0pt}

p {margin-top: 0pt;

여백-하단: 12pt}

<스타일> p.Chart {글꼴 크기:8pt; 글꼴 모음:"시간"; 색상: 검정색; 텍스트 정렬:오른쪽; }

샘플 원형 차트

간단한 파이로 그려진 난수

1: 30

Two: 18

Three: 13

Four: 9

Five: 5

<머리>

<스크립트 언어=JavaScript>

함수 displayTitle( title )

{

document.write("

" + title + "
");

}

function generateRandomNumber(num) {

return Math.round( Math.random() * (num - 1) ) + 1 ;

}

functionplottablehead( val )

{

document.writeln("

");

document.write("

" + val + "");

}

functionplottabletail()

{

document.write("

");

}

functionplotcolor(d, clr)

{

for(i=1;i<=d; i++){

document.write("

");

}

함수 setColor(전경,배경)

{

document.fgColor= 전경;

document.bgColor=배경;

}

setColor("주황색","검정색");

a=generateRandomNumber(50);

플롯테이블헤드( a );

plotcolor(a, "빨간색");

plottabletail();

a=generateRandomNumber(50);

플롯테이블헤드( a );

plotcolor(a, "파란색");

plottabletail();

a=generateRandomNumber(50);

플롯테이블헤드( a );

plotcolor(a, "녹색");

plottabletail();

a=generateRandomNumber(50);

플롯테이블헤드( a );

plotcolor(a, "노란색");

plottabletail();

a=generateRandomNumber(50);

플롯테이블헤드( a );

plotcolor(a, "회색");

plottabletail();

a=generateRandomNumber(50);

플롯테이블헤드( a );

plotcolor(a, "midnightblue");

plottabletail();

//-->

성명：

이전 기사：JavaScript 강화 튜토리얼 - 명령문다음 기사：JavaScript 강화 튜토리얼 - 명령문

JavaScript는 데이터를 기반으로 백분율 차트와 히스토그램을 생성합니다.

관련 기사