JsChart组件使用
JsChart是什么？
JSChart能够在网页上生成图标，常用于统计信息，十分好用的一个JS组件。
使用JsChart
一。导入jscharts.js
二。编写jscharts.jsp测试页面
- 下载JScharts库
从官网下载JScharts库，我们使用的是压缩包里面的jscharts.js文件。它大约150KB。
- 使用JScharts库
在网页文件（如.html或.jsp）包含JScharts库。
<script type="text/javascript" src="js/jscharts.js"></script>
- 定义容器
要在网页文件上显示JScharts生成的图像，需要把此图像放入网页容器。此网页容器我们通常用
<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
JsChart组件使用的更多相关文章
- JS组件系列——开源免费图表组件：Chart.js
前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...
- java 备用待迁移
Java基础 2018年如何快速学Java 泛型就这么简单 注解就这么简单 Druid数据库连接池就是这么简单 Object对象你真理解了吗? JDK10都发布了,nio你了解多少? COW奶牛!Co ...
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- react-router 组件式配置与对象式配置小区别
1. react-router 对象式配置 和 组件式配置 组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...
- Angular2入门系列教程3-多个组件，主从关系
上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...
- Angular2入门系列教程2-项目初体验-编写自己的第一个组件
上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...
- .NET Core 首例 Office 开源跨平台组件（NPOI Core）
前言 最近项目中,需要使用到 Excel 导出,找了一圈发现没有适用于 .NET Core的,不依赖Office和操作系统限制的 Office 组件,于是萌生了把 NPOI 适配并移植到 .NET C ...
- .NetCore中的日志（1）日志组件解析
.NetCore中的日志(1)日志组件解析 0x00 问题的产生 日志记录功能在开发中很常用,可以记录程序运行的细节,也可以记录用户的行为.在之前开发时我一般都是用自己写的小工具来记录日志,输出目标包 ...
随机推荐
- 我的 FPGA 学习历程（08）—— 实验：点亮单个数码管
数码管是一种常见的用于显示的电子器件,根据数码管大致可以分为共阴极和共阳极两种,下图所示的是一个共阳极的数码管的电路图(摘自金沙滩工作室的 51 开发板电路图),我的 AX301 开发板与这张图的情况 ...
- Python数据科学手册
Python数据科学手册(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1KurSdjNWiwMac3o3iLrzBg 提取码:qogy 复制这段内容后打开百度网盘手 ...
- AWSS3异步等待上传成功返回结果
/// <summary> /// 流上传文件 /// </summary> /// <param name="data">流内容</pa ...
- Makefile = ?= := 区别 $@，$^，$<
= 是最基本的赋值:= 是覆盖之前的值?= 是如果没有被赋值过就赋予等号后面的值+= 是添加等号后面的值 1.“=” make会将整个makefile展开后,再决定变量的值.也就是说,变量的值将会是整 ...
- 查看Oracle中存储过程长时间被卡住的原因
1:查V$DB_OBJECT_CACHE SELECT * FROM V$DB_OBJECT_CACHE WHERE name='CUX_OE_ORDER_RPT_PKG' AND LOCKS!='0 ...
- Django model对象接口
Django model查询 # 直接获取表对应字段的值,列表嵌元组形式返回 Entry.objects.values_list('id', 'headline') #<QuerySet [(1 ...
- codeforces_A. Salem and Sticks_数组/暴力
A. Salem and Sticks time limit per test 1 second memory limit per test 256 megabytes input standard ...
- koa 写简单服务
这两天用koa写了点服务,这里面和express还是有部分区别的 1.静态服务: koa 中,是有中间件, koa-static, const static_f = require('koa-sta ...
- 自动生成业务库码表insert脚本
背景:服务请求一体化项目升级到V4的服务请求类型时,所有配置库数据迁移到各省的业务库中,虽然数据出现大量冗余,但是这是唯一能解决V4 大量服务请求类型不在同一张表中的骚操作了,防止查询服务请求类型时G ...
- swust oj 1051
输出利用先序遍历创建的二叉树中的指定结点的孩子结点 1000(ms) 10000(kb) 2432 / 5430 利用先序递归遍历算法创建二叉树并输出该二叉树中指定结点的儿子结点.约定二叉树结点数据为 ...