Introduction détaillée à l'utilisation et aux fonctions du composant JsChart-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-01 14:56:20

original

1489 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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);
}
 
select sum(ar_payable) total,sup_name from account_records inner join supplier on account_records.sup_id=supplie

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.