Heim > Web-Frontend > H5-Tutorial > Ausführliche Erläuterung der Verwendung von JsChart-Komponenten

Ausführliche Erläuterung der Verwendung von JsChart-Komponenten

php中世界最好的语言
Freigeben: 2018-03-27 15:27:02
Original
1987 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren


 <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);
 Map paramMap =new HashMap();
 paramMap.put("start", start);
 paramMap.put("end", end);
 return accountRecordsService.selectSupplier(paramMap);
 }
public interface AccountRecordsService extends BaseService {
 List> selectSupplier(Map paramMap);
}
@Service("accountRecordsService")
public class AccountRecordsServiceImpl extends BaseServiceImpl
 implements AccountRecordsService {
 @Override
 public List> selectSupplier(Map paramMap) {
 // TODO Auto-generated method stub
 return accountRecordsMapper.selectSupplier(paramMap);
 }
}
public interface AccountRecordsMapper extends BaseMapper {
 
 List> selectSupplier(Map paramMap);
}
 
select sum(ar_payable) total,sup_name from account_records inner join supplier on account_records.sup_id=supplie
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage