부트스트랩 차트 구성 요소 사용 tutorial_javascript 기술

PHP中文网
풀어 주다: 2016-05-16 15:03:15
원래의
1864명이 탐색했습니다.

Bootstrap은 전 트위터 디자이너인 Mark Otto와 Jacob Thornton이 개발한 프런트엔드 툴킷으로 우아한 HTML 및 CSS 사양을 제공합니다. 부트스트랩은 단순한 프레임워크가 아니라 게임의 규칙을 변화시킵니다. 프레임워크를 사용하면 많은 애플리케이션과 웹사이트의 디자인과 개발이 훨씬 쉬워지고 수많은 HTML 프레임워크가 제품으로 대중화됩니다.

차트 컴포넌트 Chart.js는 부트스트랩의 사용하기 쉬운 컴포넌트 중 하나입니다. 유료 컴포넌트인 highchart와 비슷하지만 아직은 무료와 유료의 차이가 조금 있습니다. 제품이지만 기능은 우리 프로젝트의 요구 사항을 거의 충족합니다. 다음 JS 스크립트는 주로

/**
* 获取一个新的chart配置项
* @param color rgba颜色
* @param type 图表类型:line,bar,radar,polarArea,pie,doughnut
* @param title 显示图表的标题
* @param label 图表的标签,鼠标移到图表某个数据点时显示的提示文字
* @param categories 一般是X轴的内容
* @param data 一般是Y轴的数据
* @returns 返回图表的配置参数
*/
function getNewConfig(color,type,title,label,categories,data)
{
var background = color;
var config = {
type: type,
options: {
responsive: true,
legend: {
display: false,
position:'bottom'
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Value'
}
}]
},
title: {
display: true,
text: title
}
}
};
var dataset = {
label: label,
data: data,
fill: false,
borderDash: [, ],
borderColor : background,
backgroundColor : background,
pointBorderColor : background,
pointBackgroundColor : background,
pointBorderWidth : 
};
var data = {
labels:categories,
datasets: [dataset]
};
config.data = data;
return config;
}
로그인 후 복사

호출 방법:

var color = 'rgba(,,,.)';
var categories = ["--","--","--","--","--","--","--"];
var data = [,,,,,,];
var config = getNewConfig(color,'line','最近天微信会员增长情况','当天新增微信会员',categories,data);
var ctx = document.getElementById("chart_weixinmember").getContext("d");
var weixinMemberCountChart = new Chart(ctx, config);
로그인 후 복사

표시 효과:

참고: 위 코드를 사용하려면 차트를 참조해야 합니다. js,

차트 중국어 웹사이트 및 문서:

http://www.bootcss.com/p/chart.js/

http://www.bootcss.com/p/chart.js/docs/

차트 영어 웹사이트 및 문서:

www.chartjs.org

www.chartjs.org/docs


위는 Bootstrap Chart 컴포넌트 사용법 tutorial_javascript 스킬 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿