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

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);
 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);
}
 
  #{start} and ar_date<=#{end} and ar_bus_type='bo' 
  group by sup_name  
  ]]>
 
select sum(ar_payable) total,sup_name from account_records inner join supplier on account_records.sup_id=supplie

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!