JsChart组件使用详解


Posted in Javascript onMarch 04, 2018

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元素指定唯一的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=supplie

总结

以上所述是小编给大家介绍的JsChart组件使用详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
Javascript实现信息滚动效果
May 18 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
ionic2中使用自动生成器的方法
Mar 04 #Javascript
Vue.directive()的用法和实例详解
Mar 04 #Javascript
Vue.directive 自定义指令的问题小结
Mar 04 #Javascript
JavaScript图片处理与合成总结
Mar 04 #Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 #Javascript
编写React组件项目实践分析
Mar 04 #Javascript
Vue组件开发技巧总结
Mar 04 #Javascript
You might like
linux命令之调试工具strace的深入分析
2013/06/03 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
javaScript产生随机数的用法小结
2018/04/21 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
python单例模式实例分析
2015/04/08 Python
python之Socket网络编程详解
2016/09/29 Python
Python中修改字符串的四种方法
2018/11/02 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python实现代码统计程序
2019/09/19 Python
python模拟实现斗地主发牌
2020/01/07 Python
python实现图像拼接功能
2020/03/23 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
教师实习的自我鉴定
2013/10/26 职场文书
本科毕业生自我鉴定
2013/11/02 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
工程承诺书怎么写
2014/05/24 职场文书
二手车转让协议书
2015/01/29 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
大学班长竞选稿
2015/11/20 职场文书
Python合并pdf文件的工具
2021/07/01 Python
javascript对象3个属性特征
2021/11/17 Javascript
Python绘制散乱的点构成的图的方法
2022/04/21 Python
python blinker 信号库
2022/05/04 Python