찾다

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

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

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

 

<머리> 

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();   

//-->   

   

   

   

  


성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript 강화 튜토리얼 - 명령문다음 기사：JavaScript 강화 튜토리얼 - 명령문

관련 기사

더보기