Dieses Mal werde ich Ihnen die Verwendung von JsChart-Komponenten ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung von JsChart-Komponenten?
Was ist JsChart?
JSChart kann Symbole auf Webseiten generieren, die häufig für statistische Informationen verwendet werden. Es handelt sich um eine sehr einfach zu verwendende JS-Komponente.
JsChart verwenden
Eins. jscharts.js importieren
2. Schreiben Sie die jscharts.jsp-Testseite
1. Laden Sie die JScharts-Bibliothek von der offiziellen Website herunter. Wir verwenden die Datei jscharts.js im komprimierten Paket. Es sind etwa 150 KB.
JScharts-Bibliothek verwenden Fügen Sie die JSharts-Bibliothek in Webseitendateien ein (z. B. .html oder .jsp).
<script type="text/javascript" src="js/jscharts.js"></script>
Container definieren Um das von JSharts generierte Bild in einer Webseitendatei anzuzeigen, müssen Sie das Bild in einen Webseitencontainer einfügen. Normalerweise verwenden wir
-Tags, um diesen Webseitencontainer zu definieren, und es ist obligatorisch, einen eindeutigen ID-Wert für dieses p-Element anzugeben. Zum Beispiel:
<p id="chartcontainer">这里将用来显示图形报表</p>
Hinweis: Der Inhalt in diesem p-Container wird durch JSharts-Bilder ersetzt.
JScharts-Bild anzeigen Unten müssen wir eine kleine Menge Code schreiben, um ein lineares Diagramm anzuzeigen. Zuerst müssen wir die für das Bild erforderlichen Daten vorbereiten. Wir können JavaScript-Array verwenden, um Daten bereitzustellen. Jedes Element im Array besteht aus 5 zur Verwendung
<script type="text/javascript"> var myData = new Array([ "商品1", 20 ], [ "商品2", 10 ], [ "商品3", 30 ], [ "商品4", 10 ], [ "商品5", 5 ]); var myChart = new JSChart('chartcontainer', 'line'); myChart.setDataArray(myData); myChart.draw(); </script>
<p id="chartcontainer">这里将用来显示图形报表</p> 统计指定时间段向各个供应商的采购金额 使用selectsupplier.jsp action: @Resource private AccountRecordsService accountRecordsService; @RequestMapping("/selectSupplier") @ResponseBody public Object selectSupplier(String start,String end){ System.out.println("start:"+ start+"||end:"+end); MapparamMap =new HashMap (); paramMap.put("start", start); paramMap.put("end", end); return accountRecordsService.selectSupplier(paramMap); } public interface AccountRecordsService extends BaseService { List
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:Semantische H5-Tags
Wie WebGL JSON- und Echarts-Diagramme bedient
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von JsChart-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!