BootstrapChart component usage tutorial _ javascript skills

Chart. js is one of the easy-to-use components of Bootstrap. It is similar to highchart, a paid component. In effect, there is a little difference between free and paid products, however, this function can basically meet the needs of our project. This article will introduce the use of the BootstrapChart component. For more information, see Bootstrap, a front-end toolkit developed by former Twitter designers Mark Otto and Jacob Thornton, it provides elegant HTML and CSS specifications. Bootstrap is not just a framework, but more specifically, it changes the entire game rule. This framework makes design and development of many applications and websites much easier, and it has popularized a large number of HTML frameworks into products.

Chart. js is one of the easy-to-use components of Bootstrap. It is similar to highchart, a paid component. In effect, there is a little difference between free and paid products, however, the function can almost meet the needs of our project. The following JS script is used to easily generate a chart configuration.

/*** Get a new chart configuration item * @ param color rgba color * @ param type chart type: line, bar, radar, polarArea, pie, doughnut * @ param title: displays the title of the chart * @ param label: labels of the chart, move the cursor to a data point in the chart to display the prompt text * @ param categories is generally the content of the X axis * @ param data is generally the data of the Y axis * @ returns the configuration parameter of the chart */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 ;}

Call method:

Var color = 'rgba (,,,.) '; var categories = ["--", "--"]; var data = [,]; var config = getNewConfig (color, 'line', 'member growth in the last days', 'new Member on the day', categories, data); var ctx = document. getElementById ("chart_weixinmember "). getContext ("d"); var weixinMemberCountChart = new Chart (ctx, config );

Display Effect:

Note: The above code must reference 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 documentation:

Www.chartjs.org

Www.chartjs.org/docs

The above is the content of the Bootstrap Chart component using the tutorial _ javascript technique. For more information, see the PHP Chinese website (www.php1.cn )!