Bootstrap Chart components using tutorials _javascript Tips

Bootstrap is a front-end toolkit developed by former Twitter designer Mark Otto and Jacob Thornton, which provides elegant HTML and CSS specifications. Bootstrap is not just a frame, but rather, it changes the whole rules of the game. The framework makes it much easier to design and develop many applications and Web sites, and it has popularized a large number of HTML frameworks as a product.

Chart Component Chart.js is one of the more useful bootstrap components, and a charge of the component Highchart similar, the effect of free and charge of the product difference or a little bit, but the function can almost meet the needs of our project. The following JS script is mainly written to facilitate the creation of a chart configuration

/** * Gets a new chart configuration item * @param color RGBA color * @param type Chart type: Line,bar,radar,polararea,pie,doughnut * @param title show the chart's label Title * @param the label of a label chart, the prompt text that appears when you move the mouse over a data point in a chart * @param categories is generally the content of the x-axis * @param data is generally the y-axis (* @returns returns the configuration parameters for the chart * * Fun 
Ction 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:t Rue, Scalelabel: {display:false, labelstring: ' Month '}}], yaxes: [{display:true, Scalelabel: {display:false, label
String: ' Value '}}}, title: {display:true, Text:title}}}; var DataSet = {Label:label, data:data, Fill:false, Borderdash: [,], Bordercolor:background, backgroundcolor:backg
Round, Pointbordercolor:background, Pointbackgroundcolor:background, Pointborderwidth:};
var data = {labels:categories, datasets: [DataSet]};
Config.data = data;
return config; }

Call Method:

<canvas id= "Chart_weixinmember" height= "" ></canvas> 
var color = ' Rgba (,,,.) ';
var categories = ["--", "--", "--", "--", "--", "--", "--"];
var data = [,,,,,,];
var config = getnewconfig (color, ' line ', ' recent days micro-letter membership growth ', ' new micro-letter member ', categories,data);
var ctx = document.getElementById ("Chart_weixinmember"). GetContext ("D");

The effect displayed:

Note: Use the above code to refer to Chart.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 documents:

www.chartjs.org

Www.chartjs.org/docs