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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
List Installed Hot Fixes
2007/06/12 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
js实现无缝轮播图效果
2020/03/09 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
Python中zfill()方法的使用教程
2015/05/20 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
灵泰克Java笔试题
2016/01/09 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
给分销商的致歉信
2014/01/14 职场文书
优秀教师主要事迹
2014/02/01 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS