小编给大家分享一下JsChart的组件使用案例，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联专业为企业提供
义县网站建设、义县做网站、义县网站设计、义县网站制作等企业网站建设、网页设计与制作、义县企业网站模板建站服务，10多年
义县做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
这次给大家带来JsChart的组件使用详解，JsChart组件使用的注意事项有哪些，下面就是实战案例，一起来看一下。
JsChart是什么？
JSChart能够在网页上生成图标，常用于统计信息，十分好用的一个JS组件。
使用JsChart
一。导入jscharts.js
二。编写jscharts.jsp测试页面
1.下载JScharts库 从官网下载JScharts库，我们使用的是压缩包里面的jscharts.js文件。它大约150KB。
使用JScharts库 在网页文件（如.html或.jsp）包含JScharts库。
定义容器 要在网页文件上显示JScharts生成的图像，需要把此图像放入网页容器。此网页容器我们通常用
标签来定义，而且必须强制性地为此p元素指定唯一的ID值。比如：
这里将用来显示图形报表
注意：此p容器内的内容都会被JScharts图像所替代。
显示JScharts图像 下面，我们需要写少量代码来显示一个线性图。首先要准备好图像所需的数据，我们可以用JavaScript数组来提供数据，数组中的每个元素都是由2个元素所组成
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();
5.使用详细说明
这里将用来显示图形报表
//支持js二维数组、json格式、xml格式数据源
var myData = new Array([ "商品1", 20 ], [ "商品2", 10 ], [ "商品3", 30 ], [ "商品4", 10 ],
[ "商品5", 5 ]);
//第二个参数值有：line,bar,pie分别表示用线形图、柱状图、饼图来展示报表
var myChart = new JSChart('chartcontainer', 'line');
//数据源处理方式一：setDataArray(myData)使用js数组
//myChart.setDataArray(myData);
//数据源处理方式二：setDataJSON使用json格式数据
//myChart.setDataJSON("data.json");
//数据源处理方式三：setDataXML使用xml格式数据
myChart.setDataXML("data.xml");
myChart.setTitle('测试报表');
myChart.draw();
统计指定时间段向各个供应商的采购金额
使用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的组件使用案例”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！
网站名称：JsChart的组件使用案例-创新互联
本文来源：
http://bjjierui.cn/article/deohsg.html
