Bootstrap Chart component usage tutorial_javascript skills-JS Tutorial-php.cn

Bootstrap Chart component usage tutorial_javascript skills

PHP中文网

Release： 2016-05-16 15:03:15

Original

1816 people have browsed it

Bootstrap is a front-end toolkit developed by former Twitter designers Mark Otto and Jacob Thornton, which provides elegant HTML and CSS specifications. Bootstrap is not just a framework, but rather, it changes the rules of the game. The framework makes the design and development of many applications and websites much easier, and it popularizes a large number of HTML frameworks into products.

The chart component Chart.js is one of the easier-to-use components of Bootstrap. It is similar to highchart, a paid component. In terms of effect, there is still a little difference between free and paid products, but the functionality is almost the same. meet the needs of our project. The following JS script is mainly written to facilitate the configuration of a chart.

/**
* 获取一个新的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:&#39;bottom&#39;
},
hover: {
mode: &#39;label&#39;
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: &#39;Month&#39;
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: &#39;Value&#39;
}
}]
},
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;
}

Copy after login

Call method:

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

Copy after login

Displayed effect:

Note: Chart needs to be referenced to use the above code .js,

Chart Chinese website and documentation:

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

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

Chart English website and documentation:

www.chartjs.org

www.chartjs.org/docs

The above is the content of Bootstrap Chart component usage tutorial_javascript skills. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!