JSChart_页面图形报表

来源：互联网发布：jsp 收费系统源码编辑：程序博客网时间：2024/05/01 11:53

首先在页头的"head"中加上：

$(document).ready(function() {

            //myData与colors变量是做演示用的，可以直接赋值给myChart就可以显示，是静态数据。
            var myData = new Array(['美国', 69.5], ['加拿大', 2.8], ['日本 & 东亚', 5.6]);
            var colors = ['#FA5E1F', '#FDCB3F', '#71D743'];

//这里做的是动态数据显示。

var colorsList = ['#FA5E1F', '#FDCB3F', '#71D743', '#D23333', '#BAE73F', '#AB7B55', '#B381C9'，'#B381B9'，'#BB8AC9'，'#B3B1A9'，'#B22B69'，'#B32C19'，'#BA8999'，'#B151DA'，'#B3F1F2'，'#B411C8'，'#B471FA'，'#5581F9'，'#B32358','#B3F709'];
//页面中放入一个Hidden隐藏域，后台给赋值，这里前台再取值.

//后台给拼接的字符串格式是:

// "一号机组,25.6|二号机组,33.5|三号机组,52.6|四号机组,49.65|五号机组,65.6"

var strRule = $("#Hidden1").val();

            var strArr = strRule.split('|');
            var arr = new Array();
            var arrColor = new Array();
            for (var i in strArr) {
                arr.push([strArr[i].split(',')[0], parseFloat(strArr[i].split(',')[1])]);
                arrColor[i] = colorsList[i];
            }

//这里"graph1"是一个DIV，bar不用管

var myChart = new JSChart('graph1', 'bar');
myChart.patchMbString();

//动态的将赋值 arr 变量，这里做的死的，显示效果用的。
myChart.setDataArray(myData);

            //动态的将赋值 arrColor 变量，这里做的死的，显示效果用的。
            myChart.colorizeBars(color);
            myChart.setTitle('这是标题~');
            myChart.setTitleColor('#8E8E8E');
            myChart.setAxisNameX('地区');
            myChart.setAxisNameY('成本价格');
            myChart.setAxisColor('#c6c6c6');
            myChart.setAxisWidth(1);
            myChart.setAxisNameColor('#9a9a9a');
            myChart.setAxisValuesColor('#939393');
            myChart.setAxisPaddingTop(60);
            myChart.setAxisPaddingLeft(70);
            myChart.setAxisPaddingBottom(60);
            myChart.setTextPaddingBottom(20);
            myChart.setTextPaddingLeft(15);
            myChart.setTitleFontSize(11);
            myChart.setAxisNameFontSize(12);
            myChart.setAxisValuesFontSize(9);
            myChart.setBarValuesFontSize(9);
            myChart.setBarBorderWidth(0);
            myChart.setBarSpacingRatio(50);
            myChart.setBarValuesColor('#737373');
            myChart.setGrid(false);
            myChart.setSize(616, 321);

            //后面的背景图片
            myChart.setBackgroundImage('chart_bg.jpg');
            myChart.draw();
        });

//后面的背景图片 chart_bg.jpg ：

当时我在后台做的是一串Json的字符串，在前台用 js的函数eval转换成数组，但放入myChart中老是报错，说放入的不是一个数组或数据类型不对，之后我又将数据格式取出来看了看，却是是Number类型的。

真没折了，就换成上面的办法了，有兴趣的朋友可以研究下，共同探讨。

后台json字符串：

"{0: {0: \"一号机组\",1: 25.3,\"length\": 2},1: {0: \"二号机组\",1: 35.25,\"length\": 2},\"length\": 2}"

注意用eval转换的时候提示缺少 ")" 或缺少 ";"

必须用 eval_r("(" + strJoin + ")"); 这样的形式去转换数组。

更多资料：

http://wenku.baidu.com/view/1b22b18102d276a200292e17.html

JSCharts的基本API说明：.

JSCharts是一个轻量级的在线图表生成工具，本身十分小巧，简单易用。

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。

对于JSChart不支持中文的弊端，已有高手提供了扩展脚本。

下载后可以只引用jscharts_mb.js，也可以先引用jscharts.js，再引用jscharts.plug.mb.js，两种方法任选其一即可。

http://yunpan.cn/Q7Yh85SQHNKWs 提取码 f05b

http://yunpan.cn/Q7YhEifmS4SmK 提取码 ac64

http://yunpan.cn/Q7Yh5EmwWdfIs 提取码 db2a

http://yunpan.cn/Q7Yh5dUNPjtak 提取码 3653

0 0