Bootstrap Chart component usage tutorial, bootstrapchart

Bootstrap Chart component usage tutorial, bootstrapchart

Bootstrap is 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:

<Canvas id = "chart_weixinmember" height = ""> </canvas> 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