JSChart_页面图形报表
首先在页头的"head"中加上:
$(document).ready(function() {
//myData与colors变量 是做演示用的,可以直接赋值给myChart就可以显示,是静态数据。
var myData = new Array(['美国', 69.5], ['加拿大', 2.8], ['日本 & 东亚', 5.6]);
var colors = ['#FA5E1F', '#FDCB3F', '#71D743'];
//这里做的是动态数据显示。
var colorsList = ['#FA5E1F', '#FDCB3F', '#71D743', '#D23333', '#BAE73F', '#AB7B55', '#B381C9','#B381B9','#BB8AC9','#B3B1A9','#B22B69','#B32C19','#BA8999','#B151DA','#B3F1F2','#B411C8','#B471FA','#5581F9','#B32358','#B3F709'];
//页面中放入一个Hidden隐藏域,后台给赋值,这里前台再取值.
//后台给拼接的字符串格式是:
//
"一号机组,25.6|二号机组,33.5|三号机组,52.6|四号机组,49.65|五号机组,65.6"
var strRule = $("#Hidden1").val();
var strArr = strRule.split('|');
var arr = new Array();
var arrColor = new Array();
for (var i in strArr) {
arr.push([strArr[i].split(',')[0], parseFloat(strArr[i].split(',')[1])]);
arrColor[i] = colorsList[i];
}
//这里"graph1"是一个DIV,bar不用管
var myChart = new JSChart('graph1', 'bar');
myChart.patchMbString();
//动态的将赋值 arr 变量,这里做的死的,显示效果用的。
myChart.setDataArray(myData);
//动态的将赋值 arrColor 变量,这里做的死的,显示效果用的。
myChart.colorizeBars(color);
myChart.setTitle('这是标题~');
myChart.setTitleColor('#8E8E8E');
myChart.setAxisNameX('地区');
myChart.setAxisNameY('成本价格');
myChart.setAxisColor('#c6c6c6');
myChart.setAxisWidth(1);
myChart.setAxisNameColor('#9a9a9a');
myChart.setAxisValuesColor('#939393');
myChart.setAxisPaddingTop(60);
myChart.setAxisPaddingLeft(70);
myChart.setAxisPaddingBottom(60);
myChart.setTextPaddingBottom(20);
myChart.setTextPaddingLeft(15);
myChart.setTitleFontSize(11);
myChart.setAxisNameFontSize(12);
myChart.setAxisValuesFontSize(9);
myChart.setBarValuesFontSize(9);
myChart.setBarBorderWidth(0);
myChart.setBarSpacingRatio(50);
myChart.setBarValuesColor('#737373');
myChart.setGrid(false);
myChart.setSize(616, 321);
//后面的背景图片
myChart.setBackgroundImage('chart_bg.jpg');
myChart.draw();
});
//后面的背景图片 chart_bg.jpg :
当时我在后台做的是一串Json的字符串,在前台用 js的函数eval转换成数组,但放入myChart中老是报错,说放入的不是一个数组或数据类型不对,之后我又将数据格式取出来看了看,却是是Number类型的。
真没折了,就换成上面的办法了,有兴趣的 朋友 可以研究下,共同探讨。
后台json字符串:
"{0: {0: \"一号机组\",1: 25.3,\"length\": 2},1: {0: \"二号机组\",1: 35.25,\"length\": 2},\"length\": 2}"
注意用eval转换的时候提示缺少 ")" 或缺少 ";"
必须用 eval_r("(" + strJoin + ")"); 这样的形式去转换数组。
更多资料:
http://wenku.baidu.com/view/1b22b18102d276a200292e17.html
JSCharts的基本API说明:.
JSCharts是一个轻量级的在线图表生成工具,本身十分小巧,简单易用。
JSCharts目前提供的方法:
colorizeBars(array colordata)设置柱状图各矩形颜色。
colorizePie(array colordata)设置饼图各块颜色。
draw()用在最后,各项设置完毕后,执行此函数画出图表。
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。
对于JSChart不支持中文的弊端,已有高手提供了扩展脚本。
下载后可以只引用jscharts_mb.js,也可以先引用jscharts.js,再引用jscharts.plug.mb.js,两种方法任选其一即可。
http://yunpan.cn/Q7Yh85SQHNKWs 提取码 f05b
http://yunpan.cn/Q7YhEifmS4SmK 提取码 ac64
http://yunpan.cn/Q7Yh5EmwWdfIs 提取码 db2a
http://yunpan.cn/Q7Yh5dUNPjtak 提取码 3653
JSChart_页面图形报表的更多相关文章
- Highcharts图形报表的简单使用
Highcharts是一个纯JavaScript框架,与MSChart完全不一样,可以在网页中使用,所以php.asp.net.jsp等等页面中都可以使用.Highcharts官网:http://ww ...
- RDLC 图形报表预览时 “本地报表处理期间错误”
在RDLC报表中有图形报表的导出和打印都正常,但预览时"本地报表处理期间错误",这是因为你设置的图形太宽已经超过默认的A4 纸的宽度,解决办法:报表页面的报表--->报表属性 ...
- Android自定义控件:图形报表的实现(折线图、曲线图、动态曲线图)(View与SurfaceView分别实现图表控件)
图形报表很常用,因为展示数据比较直观,常见的形式有很多,如:折线图.柱形图.饼图.雷达图.股票图.还有一些3D效果的图表等. Android中也有不少第三方图表库,但是很难兼容各种各样的需求. 如果第 ...
- Xamarin.Forms学习系列之Syncfusion 制作图形报表
Syncfusion是一家微软生态下的第三方组件/控件供应商,除了用于HTML5和JavaScript的控件外,他们产品还涉及如下领域: WEB ASP.NET MVC ASP.NET WebForm ...
- Intergate flot with Angular js ——Angular 图形报表
下面这篇文章最终的结论就是 Flot 插件 结合 Angular 的Directive 来处理 图表的绘制 给出github上的一个demo源码.https://gist.github.com/fly ...
- Highcharts实现图形报表(我主要实现javaweb开发的图形报表)
官网网址:https://www.hcharts.cn/ 中文版的(参考起来方便,你懂的.):http://www.mamicode.com/info-detail-446038.html 网上已经有 ...
- 图形报表部署在Linux下出现乱码解决办法
客户问题: 客户的操作系统SUSE LINUX Enterprise Server 10 (i586) 64位,服务器 weblogic8.1, JDK版本:jdk1.4.系统中只有图形报表展示 ...
- jmeter结果分析(图形报表和聚合报告)
采用Jmeter测试工具对web系统作的负载测试,得出的响应报表,数据比较难懂,现作一具体说明.以下是在一次具体负载测试中得出的具体数值,测试线程设置情况为:线程数:200,等待时间(ramp-up) ...
- echarts图形报表缓存问题(option数据缓存)
这几天我在工作中用到了echarts开发报表.每次查询出来的数据都是新的,但是echart展现的图形报表却还是之前的数据.网上找了搜索了很多次也没能解决,后面加了技术群才解决的. 我开始已经确定是报表 ...
随机推荐
- VC++ 学习笔记(序):神一样的语言
总的来说,我觉得VC++是一门神一样的语言——它是公认最强大.最复杂的:它一切以效率为第一要务,却又不肯落伍,拼命兼容现在的新的语言设计特点.本来在别的语言很容与就避开的问题,在这里要用很高的技巧去设 ...
- 如何配置ssh免密码登录
[TOC] 如果你在管理一堆unix机器,每次登录都要输入密码是挺烦的事情,一方面为了安全我们一般不会将所有机器的密码都设置成一样,另一方面就算一样每次都输入一遍也很麻烦. 这种情况下我们一般是用ss ...
- 关于BigDecimal的使用
为什么使用BigDecimal 使用BigDecimal首先要注意到float,double是无法支持商业计算的.只能支持工程计算.即误差允许的计算.通常float占用4个字节,32位.double占 ...
- 为MFC界面添加一个Log Window
前言 由于早期的图像处理程序基于VC6.0,MFC也是采用VC6.0开发的.在实际处理中,我不仅需要界面的显示,有很多时候,我需要算法处理的过程中的信息,比如每个阶段的耗时,处理的图像大小,以及如果需 ...
- iOS AVKit音视频播放全面详解
公司项目中经常要用到音视频处理,也需要去定制一些东西,然后整理这些音视频处理就显得尤为重要!方便自己和广大朋友学习收藏! 以下参考连接特别重要: 苹果官方:AVKit API 苹果官方:AVFound ...
- Tips for thrift
Introduction I have designed and developed game servers successfully with thrift (http://thrift.apac ...
- JS_Detail和Discipline
编码原则 Js控件代码3部曲 (1)设置元素的 状态 在onready中添加 (2)设置元素的 动作, 每个动作 封装成 function(enclosure) (3)remove load之前 删除 ...
- Domain Space
Bluehost Register Page http://www.bluehost.com/track/weipengp
- PHP 常见语法 集合
1.die()与exit()的真正区别 die 为 exit 的别名, 执行过程 将释放内存,停止代码执行 echo "begin exec <br/>"; show( ...
- java笔试练习题
选择题(共50题,每题1.5分,共75分.多选题选不全或选错都不得分.)1. 以下属于面向对象的特征的是(C,D).(两项)A) 重载B) 重写C) 封装D) 继承 2. 以下代码运行输出是(C)pu ...