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

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)를 참고해주세요!