Bootstrap es un conjunto de herramientas frontal desarrollado por los ex diseñadores de Twitter Mark Otto y Jacob Thornton, que proporciona especificaciones elegantes de HTML y CSS. Bootstrap no es solo un marco, sino que cambia todo el juego. Este marco facilita mucho el diseño y el desarrollo de muchas aplicaciones y sitios web, y populariza una gran cantidad de marcos HTML en productos.
Chart Component Chart.js es uno de los componentes más útiles de Bootstrap. Es similar a un componente pagado HighChart. En términos de efecto, todavía hay una pequeña diferencia entre los productos gratuitos y pagados, pero casi puede satisfacer las necesidades de nuestro proyecto en términos de funcionalidad. El siguiente script JS se escribe principalmente para facilitar la configuración de un gráfico.
/*** Obtenga un nuevo elemento de configuración de gráfico* @param color rgba color* @param tipo gráfico tipo: línea, barra, radar, polarea, pastel, donut* @param Título de título Muestra el título del gráfico* @param etiqueta la etiqueta de la etiqueta de la tabla, el texto de la solicitud se muestra cuando el mouse se mueve a un punto de datos de datos de la tabla* @param las categorías de las categorías del contenido de x-or-oxis* @param dats de los datos de datos de los datos de los datos de los datos de los datos de la tabla @Param. @returns Devuelve los parámetros de configuración del gráfico*/function getNewConfig (color, type, title, etiqueta, categorías, data) {var fondo = color; var config = {type: type, options: {receptive: true, legend: {visual False, etiquetString: 'mes'}}], yaxes: [{display: true, scalelabel: {display: false, labelString: 'value'}}]}, title: {display: true, text: title}}}; var dataSet = {etiqueta: etiqueta, datos: datos, relleno: falso, borderDash: [,], bordercolor: fondo, fondo, fondo, fondo: fondo: Antecedentes, PointBorderColor: Background, PointBackgroundColor: Background, PointBorderWidth:}; var data = {etiquetas: categorías, datos de datos: [DataSet]}; config.data = data; return config;}Método de llamadas:
<Canvas id = "chart_weixinmember"> </ Canvas> var color = 'rgba (,,,.)'; var categorías = ["-"-","-","-","-","-","-","-","-"-"]]; var data = [,,,,]; var config = getnewconfig (colore Crecimiento en los últimos días ',' nuevos miembros de WeChat agregó ese día ', categorías, datos); var ctx = document.getElementById ("chart_weixinmember"). getContext ("d"); var weixinmemberCountChart = new Chart (CTX, config);Efectos mostrados:
Nota: Use el código anterior para referirse a Chart.js,
Gráfico de sitio web y documentación chino:
http://www.bootcss.com/p/chart.js/
http://www.bootcss.com/p/chart.js/docs/
Gráfico de sitios web y documentación en inglés:
www.chartjs.org
www.chartjs.org/docs