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判断元素为数字的奇异写法分享
Aug 01 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
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下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
基于empty函数的输出详解
2013/06/17 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
Python中zfill()方法的使用教程
2015/05/20 Python
详解Python装饰器由浅入深
2016/12/09 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python实现简单成绩录入系统
2019/09/19 Python
Python中return函数返回值实例用法
2020/11/19 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
导师工作推荐信范文
2014/05/17 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
河童之夏观后感
2015/06/11 职场文书
初中政治教学工作总结
2015/08/13 职场文书
创业计划书之家教托管
2019/09/25 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python