Bootstrap ist ein Front-End-Toolkit, das von den ehemaligen Twitter-Designern Mark Otto und Jacob Thornton entwickelt wurde, das elegante HTML- und CSS-Spezifikationen bietet. Bootstrap ist nicht nur ein Framework, sondern es verändert das ganze Spiel. Dieses Framework erleichtert das Design und die Entwicklung vieler Anwendungen und Websites erheblich und wird eine große Anzahl von HTML -Frameworks in Produkte populär.
Diagrammkomponenten -Diagramm.js ist eine der nützlichsten Komponenten von Bootstrap. Es ähnelt einer kostenpflichtigen Komponente HighChart. In Bezug auf die Wirkung gibt es immer noch einen kleinen Unterschied zwischen freien und bezahlten Produkten, kann jedoch die Bedürfnisse unseres Projekts in Bezug auf die Funktionalität fast erfüllen. Das folgende JS -Skript ist hauptsächlich geschrieben, um die Konfiguration eines Diagramms zu erleichtern.
/*** Erhalten Sie ein neues Diagrammkonfigurationselement* @param color rgba color* @param Typ-Diagramm Typ: Zeile, Balken, Radar, Polararea, Kuchen, Donut* @param-Titel Anzeige Der Titel des Diagramms* @param-Etikett Das Etikett des Diagramms, der Eingabeaufforderungstext angezeigt, wenn die Maustabelle zu einem Datenpunkt der Tabelle @Param-Kategorien die Inhalte der x-Aparam-Daten im Allgemeinen @param-yparam-yparam-yparam-yparam-yparam-kategorien im Allgemeinen @Param-yparam-yparam-kategorien im Allgemeinen @Param-kategorien @-ach yparam yparam im Allgemeinen die Inhalte der x-x-| @Param-Datenträger. Geben Sie die Konfigurationsparameter des Diagramms zurück. 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 : Hintergrund, PointborderColor: Hintergrund, PointbackgroundColor: Hintergrund, Pointborderwidth:};Aufrufmethode:
<canvas id = "chart_weixinMember"> </canvas> var color = 'rgba (,,,)'; var categories = ["-", "-", "-", "-", "-", ","-"-"-",", "-", "-", ","]; Wachstum in den letzten Tagen "," Neue WeChat -Mitglieder haben diesen Tag hinzugefügt ", Kategorien, Daten); var ctx = document.getElementById (" Chart_WeixInMember "). getContext (" D "); var wexinMemberCountChart = neues Diagramm (CTX, config);Gezeigte Effekte:
HINWEIS: Verwenden Sie den obigen Code, um sich auf Diagramm.js zu beziehen.
Diagramm Chinesische Website und Dokumentation:
http://www.bootcs.com/p/chart.js/
http://www.bootcs.com/p/chart.js/docs/
Diagramm Englische Website und Dokumentation:
www.chartjs.org
www.chartjs.org/docs