O Bootstrap é um kit de ferramentas de front-end, desenvolvido pelos ex-designers do Twitter Mark Otto e Jacob Thornton, que fornecem especificações elegantes de HTML e CSS. O Bootstrap não é apenas uma estrutura, mas muda o jogo inteiro. Essa estrutura facilita muito o design e o desenvolvimento de muitos aplicativos e sites e populariza um grande número de estruturas HTML em produtos.
O gráfico de componentes Chart.js é um dos componentes mais úteis do bootstrap. É semelhante a um componente pago HighChart. Em termos de efeito, ainda há uma pequena diferença entre produtos gratuitos e pagos, mas quase pode atender às necessidades do nosso projeto em termos de funcionalidade. O script JS a seguir é escrito principalmente para facilitar a configuração de um gráfico.
/*** Obtenha um novo item de configuração do gráfico* @param cor rgba cor* @param Tipo de gráfico Tipo: linha, barra, radar, polarareia, torta, donut* @param título exibir o título do gráfico* @param rótulo O rótulo do gráfico geralmente é o texto que é exibido no mouse para um ponto de dados* @PARAM* @PARAM Categorias geralmente-as categorias geralmente são as categorias do mouse* a dos dados* @param* @Param, geralmente, o textuía-a-parto que é o text. @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: 'mês'}}], yaxes: [{display: true, scalelabel: {display: false, ladelstring: 'value'}}]}, title: {display: true, text: title: title}}}; var dataSet = {etiqueta:) Antecedentes, PointborderColor: Antecedentes, PointbackgroundColor: Antecedentes, PointBorderWidth:}; var data = {Rótulos: Categorias, DataSets: [DataSet]}; config.data = dados; retorna configuração;}Método de chamada:
<canvas id = "Chart_weixInMember"> </canvas> var color = 'rgBA (,,,.)'; var categories = ["-", "-", "-"-"-", "-" e "; Crescimento dos membros nos últimos dias '' 'Novos membros do WeChat acrescentaram naquele dia', categorias, dados); var ctx = document.getElementById ("Chart_weixinMember").Efeitos mostrados:
Nota: Use o código acima para consultar o Chart.js,
Classificar site e documentação chinesa:
http://www.bootcss.com/p/chart.js/
http://www.bootcss.com/p/chart.js/docs/
Gráfico do site em inglês e documentação:
www.chartjs.org
www.chartjs.org/docs