Explication détaillée de l'utilisation des composants JsChart

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des composants JsChart. Quelles sont les précautions lors de l'utilisation des composants JsChart. Voici des cas pratiques, jetons un coup d'œil.

Qu'est-ce que JsChart ?

JSChart peut générer des icônes sur des pages Web, qui sont souvent utilisées pour des informations statistiques. Il s'agit d'un composant JS très simple à utiliser.

Utilisez JsChart

One. Importer jscharts.js

2. Écrivez la page de test jscharts.jsp

1. Téléchargez la bibliothèque JScharts depuis le site officiel Nous utilisons le fichier jscharts.js dans le package compressé. Cela fait environ 150 Ko.

Utiliser la bibliothèque JScharts Incluez la bibliothèque JScharts dans les fichiers de pages Web (tels que .html ou .jsp).

<script type="text/javascript" src="js/jscharts.js"></script>

Définir un conteneur Pour afficher l'image générée par JScharts sur un fichier de page Web, vous devez mettre l'image dans un conteneur de page Web. Nous utilisons généralement des balises

pour définir ce conteneur de page Web, et il est obligatoire de spécifier une valeur d'ID unique pour cet élément p. Par exemple :

<p id="chartcontainer">这里将用来显示图形报表</p>

Remarque : Le contenu de ce conteneur p sera remplacé par des images JScharts.

Afficher l'image JScharts Ci-dessous, nous devons écrire une petite quantité de code pour afficher un graphique linéaire. Tout d'abord, nous devons préparer les données requises pour l'image. Nous pouvons utiliser un Tableau JavaScript pour fournir des données. Chaque élément du tableau est composé de 2 éléments

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

Instructions détaillées. à utiliser

 <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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Balises sémantiques H5

Comment WebGL exploite les graphiques json et echarts

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!