JsChart是什么？
JSChart能够在网页上天生图标，经常使用于统计信息，非常好用的一个JS组件。
运用JsChart
一。导入jscharts.js
二。编写jscharts.jsp测试页面
1.下载JScharts库
从官网下载JScharts库，我们运用的是压缩包内里的jscharts.js文件。它约莫150KB。
- 运用JScharts库
在网页文件（如.html或.jsp）包括JScharts库。
<script type="text/javascript" src="js/jscharts.js"></script>- 定义容器
要在网页文件上显现JScharts天生的图象，需要把此图象放入网页容器。此网页容器我们通经常使用<div>标签来定义，而且必需强迫性地为此DIV元素指定唯一的ID值。比方：
<div id="chartcontainer">这里将用来显现图形报表</div>
注重：此DIV容器内的内容都会被JScharts图象所替换。
- 显现JScharts图象
下面，我们需要写少许代码来显现一个线性图。首先要准备好图象所需的数据，我们能够用JavaScript数组来供应数据，数组中的每一个元素都是由2个元素所组成
<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>
5.运用细致申明
<body>
<div id="chartcontainer">这里将用来显现图形报表</div>
<script type="text/javascript">
//支撑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();
</script>
<!-- var myChart = new JSChart('chart_container', $("#type").val(),'');
setAxisColor(string hexcolor)设置轴线色彩，对饼图无效。参数为16进制色彩值。
resize(integer x, integer y)重置图表大小，默许x/y为400px/300px，新值应是默许值的整数倍.
setAxisNameColor(string hexcolor)设置轴线名的色彩，对饼图无效。
setAxisNameFontSize(integer fontsize)设置轴线名字体大小，对饼图无效。默许是11。
setAxisNameX(string axisname)设置x轴的称号，对饼图无效。
setAxisNameY(string axisname)设置y轴的称号，对饼图无效。
setAxisPaddingBottom(integer padding)设置x轴和容器底部的间隔，默许30。
setAxisPaddingLeft(integer padding)设置y轴和容器左侧距的间隔，默许40。
setAxisPaddingRight(integer padding)设置图表右侧和容器的间隔，默许30。
setAxisPaddingTop(integer padding)设置图表上边和容器的间隔，默许30。
setAxisValuesColor(string hexcolor)设置x/y轴值刻度值的色彩，对饼图无效。
setAxisValuesDecimals(integer decimals)设置曲线图的x/y轴值，或柱状图的y轴值，对饼图无效，默许是auto。
setAxisValuesFontSize(integer fontsize)设置两轴上值的字体大小，对饼图无效。
setAxisValuesNumberX(integer number)设置x轴上显现的值的个数，此值会自动调解，对饼图无效。
setAxisValuesNumberY(integer number)设置x轴上显现的值的个数，此值会自动调解，对饼图无效。
setAxisWidth(integer width)设置轴的宽度，默许是2。
setBackgroundColor(string hexcolor)设置全部图表的背景色彩，默许是#FFF。
setBackgroundImage(string filename)设置图表的背景图片，图片会自动沿两轴反复。
setBarBorderColor(string hexcolor)设置柱状图的条形边框色彩，只对柱状图有用，默许#C4C4C4。
setBarBorderWidth(integer width)设置柱状图边框宽度，只对柱状图有用。
setBarColor(string hexcolor)设置柱状图一切矩形的色彩，此函数被colorize()函数重写，只对柱状图有用。
setBarOpacity(float opacity)设置柱状图的透明度，值在0～1之间，默许0.9。
setBarSpacingRatio(integer ratio)设置柱状图矩形间距，由此来掌握柱状图的宽度，值为0～100之间的整数，默许是10。
setBarValues(boolean values)设置是不是在矩形顶端显现值。
setBarValuesColor(string hexcolor)设置柱状图矩形的值的色彩。
setBarValuesDecimals(integer decimals)设置柱状图矩形高度的值，值为十进制数，默许auto。
setBarValuesFontSize(integer fontsize)设置柱状图矩形值的字体大小，默许8.
setCanvasIdPrefix(string prefix)自定义临盆元素的ID前缀，默许是JSChart，此值平常不必修正。
setDataArray(array data, string id)将数据以数组的情势导入图表，id参数是可选的，而且能够设置雷同的id。
setDataXML(string filename)将数据以xml的情势导入到图表。
setFlagColor(string hexcolor)为提醒标志设置色彩。
setFlagOffset(integer offset)设置提醒标志的偏移量，只适用于饼图。
setFlagOpacity(float opacity)设置提醒标志的透明度，0～1之间，默许0.5.
setFlagRadius(integer radius)设置提醒标志的半径，默许3.
setFlagWidth(integer width)设置提醒标志边框宽度，默许1.
setGraphExtend(boolean extend)设置是不是开启图表延长功用，默许是false，假如翻开，双轴和网格线将扩大当前长度的1/15，如许能够在款式上越发雅观.
setGraphLabel(string label)设置自定义图表水印标签笔墨。
setGraphLabelColor(string hexcolor)设置自定义图表水印标签色彩。
setGraphLabelFontSize(integer fontsize)设置自定义图表水印标签的字体大小，默许8.
setGraphLabelOpacity(float opacity)设置自定义图表水印标签的透明度。
setGraphLabelPosition(string position)设置自定义图表水印标签的位置，取值局限在（nw, ne, sw ，se），离别定位在四个角，默许ne，即右上角。
setGraphLabelShadowColor(string hexcolor)设置自定义图表水印标签的暗影色彩。
setGrid(boolean grid)设置是不是显现网格线。
setGridColor(string hexcolor)设置网格线的色彩，默许#C6C6C6。
setGridOpacity(float opacity)设置网格线透明度，取值在0～1之间，默许0.5。
setIntervalEndX(integer end)设置x轴的完毕值，假如设置了起始值，则此值必需比起始值大。
setIntervalEndY(integer end)设置y轴的完毕值，假如设置了起始值，则此值必需比起始值大。
setIntervalStartX(integer start)设置x轴的起始值，假如设置了完毕值，则此值必需比完毕值小。
setIntervalStartY(integer start)设置y轴的起始值，假如设置了完毕值，则此值必需比完毕值小。
setLabelX(array label)在x轴上增加标签，其参数是两个值组成的一个数组，第一个参数为标签在x轴上的位置，第二个值为标签显现的内容。
setLabelY(array label)在y轴上增加标签，其参数是两个值组成的一个数组，第一个参数为标签在y轴上的位置，第二个值为标签显现的内容。
setLineColor(string hexcolor, string id)设置曲线图中曲线的色彩。拜见曲线图示例3.
setLineOpacity(float opacity, string id)设置曲线图中曲线的透明度，取值0～1之间，默许0.9。参数id的意义同上。
setLineWidth(integer width, string id)设置曲线图中曲线的宽度，默许2.
setPieOpacity(float opacity)设置饼图的透明度，取值0～1，默许1.
setPiePosition(integer x, integer y)设置饼图在容器内的位置，默许0，即位于容器的中心.
setPieRadius(integer radius)设置饼图的半径。
setPieUnitsColor(string hexcolor)设置饼图块名的色彩。
setPieUnitsFontSize(integer fontsize)设置饼图块名的字体大小。
setPieUnitsOffset(integer offset)设置饼图块名的位置，整数外移，负数内移。
setPieValuesColor(string hexcolor)设置饼图值的色彩。
setPieValuesDecimals(integer decimals)设置饼图上的总值。
setPieValuesFontSize(integer fontsize)设置饼图上值的字体大小。
setPieValuesOffset(integer offset)设置饼图上值的偏移，整数外移，负数内移，默许-20。
setShowXValues(boolean show)是不是显现x轴上的刻度值。
setShowYValues(boolean show)是不是显现y轴上的刻度值。
setSize(integer x, integer y)预定义容器的大小，需用在draw()函数之前。
setTextPaddingBottom(integer padding)设置x轴上标签笔墨与容器下边的间隔，默许1.
setTextPaddingLeft(integer padding)设置y轴上标签笔墨与容器左侧的间隔，默许8.
setTextPaddingTop(integer padding)设置图表顶端与容器上边的间隔，默许15.
setTitle(string title)设置图表题目，默许“JSChart”。
setTitleColor(string hexcolor)设置题目色彩。
setTitleFontSize(integer fontsize)设置题目字体大小。
setTitlePosition(string position)设置题目位置，取值局限（center, left ， right.）。
setTooltip(array tooltip)设置x轴上提醒。
setTooltipBackground(string hexcolor)设置提醒背景。
setTooltipBorder(string css)设置提醒背景边框作风，参数是css表达式，默许是 1px solid #d3d3d3。
setTooltipFontColor(string hexcolor)设置提醒内容色彩。
setTooltipFontFamily(string font)设置提醒字体作风，默许arial.
setTooltipFontSize(integer fontsize)设置提醒内容字体大小，默许12.
setTooltipOffset(integer offset)设置提醒内容偏移，默许7。
setTooltipOpacity(float opacity)设置提醒透明度，默许0.7.
setTooltipPadding(string css)设置提醒padding款式，默许 2px 5px。
setTooltipPosition(string position)设置提醒位置,取值局限 nw, ne, sw and se 默许se。
setLegendShow(boolean show)设置是不是显现图例
-->
</body>统计指定时间段向各个供应商的采购金额
运用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<String, String> paramMap =new HashMap<String, String>();
paramMap.put("start", start);
paramMap.put("end", end);
return accountRecordsService.selectSupplier(paramMap);
}
public interface AccountRecordsService extends BaseService<AccountRecords> {
List<Map<String, Object>> selectSupplier(Map<String,String> paramMap);
}
@Service("accountRecordsService")
public class AccountRecordsServiceImpl extends BaseServiceImpl<AccountRecords>
implements AccountRecordsService {
@Override
public List<Map<String, Object>> selectSupplier(Map<String, String> paramMap) {
// TODO Auto-generated method stub
return accountRecordsMapper.selectSupplier(paramMap);
}
}
public interface AccountRecordsMapper extends BaseMapper<AccountRecords> {
List<Map<String, Object>> selectSupplier(Map<String, String> paramMap);
} <select id="selectSupplier" parameterType="map" resultType="map">
<![CDATA[
select sum(ar_payable) total,sup_name from account_records inner join supplier
on account_records.sup_id=supplier.sup_id
where ar_date >#{start} and ar_date<=#{end} and ar_bus_type='bo'
group by sup_name
]]>
</select>
select sum(ar_payable) total,sup_name from account_records inner join supplier on account_records.sup_id=supplier.sup_id where ar_date >'2014-01-01' and ar_date<='2015-08-08' and ar_bus_type='bo' group by sup_name
假如文章有错的处所迎接斧正，人人相互交换。习气在微信看技术文章，想要猎取更多的Java资本的同砚，能够
关注微信民众号:Java3y
