一款web图表工具 jscharts.js

jscharts.js 原版不支持中文标题。jscharts_mb.js是修改后,完美支持中文标题。
在生成一个JSChart实例之后紧跟着执行一个函数patchMbString():

var myChart = new JSChart('chart', 'line');
myChart.patchMbString();
myChart.setTitle('9月支出');
myChart.········

网盘下载地址:http://pan.baidu.com/s/1skAM7UX

jschart.js应用完整实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>  
    <title>JScharts Test</title>  
    <script type="text/javascript" src="${basepath}/resource/js/jscharts_mb.js"></script>  
  </head>  
  <body>  
    <div id="chart1">走势图显示处</div>  
  </body>  
  <script type="text/javascript">  
    var myData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);  
    var myData2 = new Array([10,25], [15,15], [20,35], [25,15], [30,10]);  

    var myChart = new JSChart('chart1', 'line');  
    myChart.resize(900,500);
    myChart.setAxisPaddingLeft(50);  //左侧Y轴距离容器边沿
    myChart.setAxisPaddingTop(66);  //下方侧X轴距离容器边沿
    myChart.setAxisPaddingBottom(40);  //下方侧X轴距离容器边沿
    
    myChart.setDataArray(myData,"河南"); ;  //第一条线的数据
    myChart.setLineColor('#000000','河南'); //第一条线的颜色
    
    myChart.setDataArray(myData2,"河北");  //第二条线的数据
    myChart.setLineColor('#FF0000','河北');//第二条线的颜色
//  myChart.setLineWidth(5,"河北");        //第二条线的宽度。

    myChart.setAxisNameX("价格");         //X轴名称
    myChart.setAxisNameY("日期");         //Y轴名称
    myChart.setAxisNameColor("#FF0000");
    
    myChart.setAxisValuesFontSize(10);//设置两轴上刻度值的字体大小
    myChart.setAxisColor("#000000");  //坐标轴颜色
    myChart.setAxisValuesColor("#000000");  //坐标轴刻度值颜色
//  myChart.setAxisValuesDecimals();设置曲线图的x/y轴值,默认是auto。
//  myChart.setAxisValuesNumberX(31)设置x轴上显示的值的个数,此值会自动调整
//  myChart.setAxisValuesNumberY(50)设置y轴上显示的值的个数,此值会自动调整
    myChart.setGraphExtend(true);//坐标轴向外延伸一点。
    myChart.setGrid(true);//网格
    myChart.setGridOpacity(0.6);//网格透明度
    
    myChart.setTitle("九月走势图");     //自定义图表标题
    myChart.setTitleColor("#FF0000");  //自定义标题样色
    myChart.setTitleFontSize(18);     //自定义标题字体大小
    
    myChart.setTooltip([20,"河南","河南"]);
    myChart.setTooltipFontColor("#000000","河南");
    
    myChart.setTooltip([20,"河北","河北"]);
    myChart.setTooltipFontColor("#FF0000","河北");

    myChart.patchMbString();  //支持中文
    myChart.draw();  
  </script> 
</html>

一些jschart自带的属性方法

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。

setLegendShow(boolean show)设置是否显示图例
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,424评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,351评论 0 17
  • 父亲,我,儿子 父亲脾气暴躁,可是没有打过我,小时我喜欢上树爬高,也曾摔断过腿,也曾钻过汽车底下,差点送命,也曾偷...
    一枚冰儿阅读 266评论 1 0
  • 抓包工具!安装破解这里就不讲了。主要讲讲大致原理和用法! 大致原理:将电脑设置成手机的http代理(具体原理我也不...
    6灰太狼9阅读 1,839评论 0 1