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去掉字符串里的所有空格
Feb 08 Javascript
javascript网页关键字高亮代码
Jul 30 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
AngularJS表单基本操作
Jan 09 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
Vue 幸运大转盘实现思路详解
May 06 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不写闭合标签的好处
2014/03/04 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
快速了解Python中的装饰器
2018/01/11 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python实现词法分析器
2019/01/31 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
django中cookiecutter的使用教程
2020/12/03 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
JSF的标签库有哪些
2012/04/27 面试题
汉语言文学专业自荐信
2014/06/11 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
行政文员岗位职责
2015/02/04 职场文书