JSChart-转

JScharts是一个用于在浏览器直接绘制图表的JavaScript工具包。JScharts支持柱状图、圆饼图以及线性图,可以直接将这个图插入网页,JScharts图的数据可以来源于XML文件、JSON文件或JavaScript数组变量。

    

折线图

var myChart = new JSChart(‘XXX‘, ‘line‘);

柱状图

var myChart = new JSChart(‘XXX‘, ‘bar‘);

饼状图

var myChart = new JSChart(‘XXX‘, ‘pie‘);

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。

时间: 2024-10-29 19:07:06

JSChart-转的相关文章

【SSH网上商城项目实战29】使用JsChart技术在后台显示商品销售报表

这个项目终于接近尾声了,注册功能我就不做了,关于注册功能我的另一篇博客详细的介绍了一下注册的表单验证,可以直接把功能加到本项目中,修改一下相关的跳转即可,就不再做了.另外,目前这个项目只有action层和service层,dao层我还没抽取,做完这个报表,我把dao层抽取一下,再对整个项目做个总结,差不多就可以上传源码了,到时候欢迎大家下载~ 这一节主要做一下最后一个功能:使用JsChart这个工具来显示商品的销售报表,JsChart是很好用的一款制作报表的工具,之所以好用,是因为它的官方实例做

JSChart

转自:http://www.cnblogs.com/riverback-moon/archive/2010/10/11/1848071.html JSChart是一个轻量级的在线图表生成工具,本身十分小巧,简单易用,相对来讲功能也不是特别强大,但是对于一些要求不高的应用来讲已经够用了. 这个框架本身对中文支持不是很好,手册什么的都是英文的. JSChart内置函数参考 colorizeBars(array colordata)设置柱状图各矩形颜色.colorizePie(array colord

利用jschart制作图表信息

这个使用jschart做的,但是出现一个问题,就是提示点由于滚动条的滑动会进行绝对定位,导致提示点于需要提示的地方不重合,暂时未找到解决办法,蛋疼...... Dictionary<string, object> result = new Dictionary<string, object>(); List<Data> data = new List<Data>(); result.Add("access", getData_exec(a

JQuery中jsCharts图表插件(十)

一:1.jsCharts图表插件 注意:从官方下来的例子都没指定页面编码,在这种情况下,浏览器就会使用默认设置中文编码:GB2312,GBK等:导致无法执行. 请在html代码中的<head></head>标签对里加入 <meta http-equiv=”content-type” content=”text/html;charset=utf-8″>,也就是指定页面编码[只要不是中文编码就行] 2.下载地址: 官方地址:http://www.jumpeyecompone

GD库使用小结---1

因为一开始,“大家”都说一般任务中,用php操作图片不常见,像我们这种基本业务型的,就更用不到了,所以先别看,偶就没有看.现在有机会了自然要来玩一把. 以前学过C#的GDI+,交了课程设计后忘得一干二净.又被迫学了点MFC的画图,觉得这是最蛋疼的画图过程.去年做了个小任务时用到了js图表控件,用的是封装好的js库直接调方法,然后发现这是用HTML5的canvas元素结合js打造而成,这些chart控件很多很漂亮:jsChart.HighChart.EChart.aChart.Chart.js等等

用dygraphs图表分析xdebug的trace结果

2015年12月1日 19:44:23 注: 本文用到的js图表库: dygraphs (400k, 没有太多主题, 不像highchart(42M), echarts(24M), 这里仅分析数据用) jschart.js虽然还小, 但是速度太慢太慢........ 测试数据量 19108个数据点 先上效果图: 横坐标: 累计时间/时间轴, 单位是毫秒, 纵坐标, 对应时间的内存使用量单位是...(cao还没确定) 代码如下: 1 <html> 2 <head> 3 <met

FusionCharts参数说明 (中文)

FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关参数中文说明如下. FusionCharts Free中文开发指南第二版.pdf 功能特性 animation                    是否动画显示数据,默认为 1(True) showNames                    是否显示横向坐标轴(x轴)标签名称 rotateNames                是否旋转显示标签,默认为0(False):横向显示 showValues     

kendoui仪表板和直方图 演示样本

到那个时刻kendeodui我相信大家一定不陌生.该js在绘画方面的好成绩. 现在来看看 它的仪表盘和直方图效果: html和js代码例如以下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>kendoui DEmo</title> <link type="text/css" rel="st

使用JS charts来画图表(二)——饼状图

如上是一个饼状图: 代码如下: <html> <head> <title>部门管理</title> <script type="text/javascript" src="codebase/jscharts.js"></script> </head> <body> <div id="graph">Loading graph...</d