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 whole game. This framework makes the design and development of many applications and websites much easier, and it popularizes a large number of HTML frameworks into products.
Chart component Chart.js is one of the more useful components of Bootstrap. It is similar to a paid component highchart. In terms of effect, there is still a little difference between free and paid products, but it can almost meet the needs of our project in terms of functionality. The following JS script is mainly written to facilitate the configuration of a chart.
/*** Get a new chart configuration item * @param color rgba color * @param type Chart type: line,bar,radar,polarArea,pie,doughnut* @param title Display the title of the chart* @param label The label of the chart, the prompt text displayed when the mouse moves to a data point of the chart* @param categories Generally the content of the X-axis* @param data Generally the data of the Y-axis* @returns Return the configuration parameters 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;}Calling method:
<canvas id="chart_weixinmember"></canvas> var color = 'rgba(,,,.)';var categories = ["--","--","--","--","--","--","--","--","--","--"];var data = [,,,,,];var config = getNewConfig(color,'line','recent WeChat membership growth in recent days','New WeChat members added that day',categories,data);var ctx = document.getElementById("chart_weixinmember").getContext("d");var weixinMemberCountChart = new Chart(ctx, config);Shown effects:
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 documentation:
www.chartjs.org
www.chartjs.org/docs