Einführung in die Verwendung der JsChart-Komponente

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.

Verwenden Sie JsChart

One. 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. Bereiten Sie zunächst die für das Bild erforderlichen Daten vor. Jedes Element im Array besteht aus 2 Elementen.

<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>

Verwandte Empfehlungen:

 <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

JSChart leichtes grafisches Berichtstool (chinesische Referenz für integrierte Funktionen)_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der JsChart-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!