JSChart是一个轻量级的在线图表生成工具,本身十分小巧,简单易用,相对来讲功能也不是特别强大,但是对于一些要求不高的应用来讲已经够用了。

  这个框架本身对中文支持不是很好,手册什么的都是英文的。

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,两种方法任选其一即可。

JSChart的更多相关文章

  1. JsChart组件使用

    JsChart是什么? JSChart能够在网页上生成图标,常用于统计信息,十分好用的一个JS组件. 使用JsChart 一.导入jscharts.js 二.编写jscharts.jsp测试页面 下载 ...

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

      转自:https://blog.csdn.net/eson_15/article/details/51506334 这个项目终于接近尾声了,注册功能我就不做了,关于注册功能我的另一篇博客详细的介绍 ...

  3. JsCharts图表的介绍和简单使用

    一.JSCharts介绍 JScharts是一个用于在浏览器直接绘制图表的javascript工 具包.JScharts支持柱状图.圆饼图以及线性图,可以直接将这个图插入网页, JScharts图的数 ...

  4. FusionCharts参数说明 (中文)

    FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关参数中文说明如下. FusionCharts Free中文开发指南第二版.pdf 功能特性 animation       ...

  5. JS组件系列——开源免费图表组件:Chart.js

    前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...

  6. JSChart_页面图形报表

    首先在页头的"head"中加上: $(document).ready(function() { //myData与colors变量  是做演示用的,可以直接赋值给myChart就可 ...

  7. JSCharts

    JsCharts是一款轻量级的,基于js的图形报表工具,提供了线形图,柱状图,饼图,使用简单,相对其他的图表如FusionCharts来讲功能可能不是特别强大,但是对于一些要求不高的应用来讲已经够用了 ...

  8. GD库使用小结---1

    因为一开始,“大家”都说一般任务中,用php操作图片不常见,像我们这种基本业务型的,就更用不到了,所以先别看,偶就没有看.现在有机会了自然要来玩一把. 以前学过C#的GDI+,交了课程设计后忘得一干二 ...

  9. FusionCharts參数中文说明

    FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关參数中文说明例如以下. 功能特性 animation                    是否动画显示数据,默觉得 1( ...

随机推荐

  1. web前端学习(一) html+js实现文本框背景及只读属性修改

    因为工作需求接触了html+javascript,对于从事嵌入式开发,一直接触c和汇编的我,感觉这种语言是一个的全新的领域,宽松的语法要求,等同于文本逻辑的输出,当然我并不认为它简单,错误检查的缺少让 ...

  2. 转!!MAC和PHY的区别

    一块以太网网卡包括OSI(开方系统互联)模型的两个层,物理层和数据链路层.物理层定义了数据传送与接收所需要的电与光信号.线路状态.时钟基准.数据编码和电路等,并向数据链路层设备提供标准接口.数据链路层 ...

  3. mac10.12的Cocopods安装使用

    Cocopods的安装 CocoaPods应该是iOS最常用最有名的类库管理当我们开发iOS应用时,会经常使用到很多第三方开源类库,比如AFNetWorking等等,可能某个类库又用到其他的库,手动一 ...

  4. INTERPRETER(解释器)

    1 意图:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 2 动机:如果一种特定类型的问题发生的频率足够高,那么可能就值得将该问题的各个实例表述为一个 ...

  5. dom jaxp详解

    转自 http://blog.csdn.net/java958199586/article/details/7277904 一.XML解析技术概述 1.XML解析方式分为两种:dom和sax (1)d ...

  6. commonJS — 字符串操作(for String)

    for String github: https://github.com/laixiangran/commonJS/blob/master/src/forString.js 代码 /** * Cre ...

  7. 1.2G内存试玩RAMOS_XP

    1.2G内存试玩RAMOS_XP1.为了防止做系统时出现意外,用Bootice把C盘MBR修改为Grub4dos,这样子系统如果失败,可以进入PE重做. 2.进入PE格式化C盘,格式化的时候勾选启用N ...

  8. kubernetes容器编排系统介绍

    版权声明:本文由turboxu原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/152 来源:腾云阁 https://www. ...

  9. java 集合(set)

    Interface ListIterator<E> 特有的方法: hasPrevious() 判断是否存在上一个元素. previous() 当前指针先向上移动一个单位,然后再取出当前指针 ...

  10. (27)odoo 中改变菜单动作的默认视图

    一个动作下面有多个视图来支持,像表单视图.列表视图.看板视图.图表视图等 这时我们想改变系统默认指定的视图,方法其实有两种,一种是通过面板改,一种是开发一个小模块 举一例:项目默认打开是用了看板视图, ...