JSChart轻量级图形报表工具(内置函数中文参考)


Posted in Javascript onOctober 11, 2010

因为网上讲这个框架的文章不是很多,而且它本身对中文支持不是很好,手册什么的都是英文的,虽然不是很多,但考虑到一些新手可能没有时间和精力来阅读参考手册,为了让更多的朋友了解它,所以工作之余就大概的翻译了一下它的内置函数,因为时间仓促,有些地方翻译的很大概,也难免混杂了一些错误,算是抛砖引玉吧,希望大家不明白的地方亲手测试一下,参照它的官方提供的例子很容易上手。

JSChart内置函数参考

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官方网站http://www.jscharts.com/上面有完整的手册和示例。

对于JSChart不支持中文的弊端,早已有高手提供了扩展脚本,网上很容易找到了,可以在这里下载。
下载后可以只引用jscharts_mb.js,也可以先引用jscharts.js,再引用jscharts.plug.mb.js,两种方法任选其一即可。

Javascript 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
JS实现li标签的删除
Apr 12 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 #Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 #Javascript
基于jQuery的实现简单的分页控件
Oct 10 #Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 #Javascript
Tips 带三角可关闭的文字提示
Oct 06 #Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 #Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 #Javascript
You might like
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
php session的应用详细介绍
2017/03/22 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python Django模板的使用方法
2016/01/14 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
python实现人机五子棋
2020/03/25 Python
Python如何急速下载第三方库详解
2020/11/02 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015年母亲节寄语
2015/03/23 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python