Introduction détaillée à l'utilisation et aux fonctions du composant JsChart

JSChart peut générer des icônes sur les pages Web, qui sont souvent utilisées pour des informations statistiques. Il s'agit d'un composant JS très simple à utiliser. Cet article présente principalement l'explication détaillée de l'utilisation du composant JsChart. Les amis dans le besoin peuvent se référer à

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 des tableaux 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(&#39;chartcontainer&#39;, &#39;line&#39;);
 myChart.setDataArray(myData);
 myChart.draw();
 </script>

Instructions d'utilisation détaillées

 <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

Une brève discussion sur les scénarios d'application des composants intégrés de Vue

Un tutoriel simple sur l'utilisation de moins dans vue2

Exemple de code pour développer un composant bouton avec vue

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!