JsChart组件使用详解
程序员文章站
2022-08-31 18:46:43
jschart是什么？
jschart能够在网页上生成图标，常用于统计信息，十分好用的一个js组件。
使用jschart
一。导入jscharts.js
...
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组件使用详解，希望对大家有所帮助