Bootstrap은 이전 트위터 디자이너 인 Mark Otto와 Jacob Thornton이 개발 한 프론트 엔드 툴킷으로 우아한 HTML 및 CSS 사양을 제공합니다. Bootstrap은 프레임 워크 일뿐 만 아니라 오히려 전체 게임을 변경합니다. 이 프레임 워크는 많은 응용 프로그램과 웹 사이트의 설계 및 개발을 훨씬 쉽게 만들 수 있으며 많은 HTML 프레임 워크를 제품으로 대중화합니다.
차트 구성 요소 차트 .JS는 부트 스트랩의 가장 유용한 구성 요소 중 하나입니다. 유료 구성 요소 HighChart와 유사합니다. 효과 측면에서, 무료 제품과 유료 제품 사이에는 여전히 약간의 차이가 있지만 기능 측면에서 프로젝트의 요구를 거의 충족시킬 수 있습니다. 다음 JS 스크립트는 주로 차트 구성을 용이하게하기 위해 작성됩니다.
/*** 새 차트 구성 항목 가져 오기* @param color rgba color* @param 유형 차트 유형 : 라인, 바, 레이더, 편광, 파이, 도넛* @param 제목은 차트의 제목을 표시합니다* @param 레이블 차트의 레이블, 차트의 데이터 포인트로 표시되는 프롬프트 텍스트* @param 데이터의 내용* @param 데이터* @param 데이터* @param 데이터* @param 데이터* @ 차트의 구성 매개 변수를 반환*/function getNewConfig (색상, 유형, 제목, 레이블, 카테고리, 데이터) {var backgring = color; var config = {유형 : 유형 : {responsive : true, legend : {false, position : 'bottom'}, hover : {mode : 'label'}, scale : false, labelstring : 'month'}}], yaxes : [{display : true, scalelabel : {display : false, labelstring : 'value'}}]}, 제목 : {display : true : text : title}}; var dataSet = {label : data : data : false, borderdash : [], BournderColor : 배경, PointborderColor : 배경, PointbackgroundColor : 배경, PointborderWidth :}; var data = {레이블 : 범주, 데이터 세트 : [dataSet]}; config.Data = data; return config;}통화 방법 :
<canvas id = "chart_weixinmember"> </canvas> var color = 'rgba (,,.)'; var 범주 = [ "-"-"-"-"-"-","-","-"-"-"-"-"-"-"-"-"]; var data = [,,,]; Var config = getnewconfig ( ',' '', '' 최근의 성장 ','New WeChat 회원이 그 날 추가 ', 카테고리, 데이터); var ctx = document.getElementById ( "Chart_weixinMember"). getContext ( "d"); var weixinMemberCountChart = 새로운 차트 (ctx, config);
표시 효과 :
참고 : 위의 코드를 사용하여 Chart.js를 참조하십시오.
차트 중국 웹 사이트 및 문서 :
http://www.bootcss.com/p/chart.js/
http://www.bootcss.com/p/chart.js/docs/
차트 영어 웹 사이트 및 문서 :
www.chartjs.org
www.chartjs.org/docs