一、JScharts介绍
JScharts是一个用于在浏览器直接绘制图表的JavaScript工具包。JScharts支持柱状图、圆饼图以及线性图，可以直接将这个图插入网页，JScharts图的数据可以来源于XML文件、JSON文件或JavaScript数组变量。JScharts兼容所有主流的浏览器，且使用时无需任何服务器端的插件或模块，是纯JavaScript组件，免费(含水印)。
JScharts是收费工具，非商业使用收费39美元/1 domain；商业使用收费79美元/1 domain。可免费使用，免费版含水印。要删除水印，需要一个域密钥。
二、JScharts新特性
1. 支持3D饼状图或3D柱状图
2. 多系列柱状图
3. 水平柱状图
4. 线性图支持动画显示
5. 新的自定义方法
当前JScharts最新版本是3.06版。
支持的浏览器版本为：Chrome 10以上，Chrome 1.5以上，IE 8以上，Safari 3.1以上，Opera 9以上等。
三、JScharts使用指南
1.下载JScharts库
从官网下载JScharts库，我们使用的是压缩包里面的jscharts.js文件。它大约150KB。
2. 使用JScharts库
在网页文件（如.html或.jsp）包含JScharts库。
<scripttype="text/javascript" src="js/jscharts.js"></script>
3. 定义容器
要在网页文件上显示JScharts生成的图像，需要把此图像放入网页容器。此网页容器我们通常用<div>标签来定义，而且必须强制性地为此DIV元素指定唯一的ID值。比如：
<divid="chartcontainer">This is just a replacement in case Javascriptis not available or used for SEO purposes</div>
注意：此DIV容器内的内容都会被JScharts图像所替代。
4. 显示JScharts图像
下面，我们需要写少量代码来显示一个线性图。首先要准备好图像所需的数据，我们可以用JavaScript数组来提供数据，数组中的每个元素都是由2个元素所组成。
代码如下：
<scripttype="text/javascript">
varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
varmyChart = new JSChart('chart_container', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>
完整的代码如下：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>JScharts Test</title>
- </head>
- <body>
- <script type="text/javascript" src="sources/jscharts.js"></script>
- <div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>
- <script type="text/javascript">
- var myData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
- var myChart = new JSChart('chartcontainer', 'line');
- myChart.setDataArray(myData);
- myChart.draw();
- </script>
- </body>
- </html>
5. 在浏览器查看结果
1）线性图
用浏览器查看上面的文件，结果如下：
} Customerize-line
} <script type="text/javascript">
} var myData = newArray([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35,8], [40, 5], [45, 6], [50, 2.5]);
} var myChart = newJSChart('graph', 'line');
} myChart.setDataArray(myData);
} myChart.setAxisColor('#656565');//设置x|y轴的颜色
} myChart.setAxisNameColor('#4A4A4A');//设置x|y轴文字的颜色
} myChart.setAxisNameFontSize(10);//设置x|y轴文字的大小
} myChart.setAxisNameX('Horizontalaxis values'); //设置x轴的文字
} myChart.setAxisNameY('Verticalaxis'); //设置y轴的文字
} myChart.setAxisPaddingBottom(60);//设置x轴底部边距
} myChart.setAxisPaddingLeft(180);//设置x轴的左边距
} myChart.setAxisPaddingRight(170);//设置图表的右边距
} myChart.setAxisPaddingTop(65);//设置图表顶部边距
} myChart.setAxisValuesColor('#656565');//设置x|y轴的数字颜色
} myChart.setAxisValuesNumberX(6);//设置x轴显示数字的个数
} myChart.setBackgroundColor('#EEE');//设置背景颜色
} myChart.setGrid(false);//设置不显示图标背后的网格
2）柱状图
将代码：
varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
varmyChart = new JSChart('chartcontainer', 'line');
改成：
varmyData = new Array(['Unit 1',20], ['Unit 2',10], ['Unit 3',30], ['Unit 4',10],['Unit 5',5]);
varmyChart = new JSChart('chartcontainer', 'bar');
则显示如下：
} Customerize-bar
} <script type="text/javascript">
} var myData = newArray(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10],['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
} var colors =['#CE0000', '#EF2323', '#D20202', '#A70000', '#850000', '#740000', '#530000','#850000', '#B00000', '#9C0404', '#CE0000', '#BA0000'];
} var myChart = newJSChart('graph', 'bar');
} myChart.setDataArray(myData);
} myChart.colorizeBars(colors);
} myChart.setDataArray(myData);
} myChart.setAxisColor('#9D9F9D');//设置x|y轴的颜色
} myChart.setAxisWidth(1);//设置x|y轴的宽度
} myChart.setAxisNameX('Months');//x轴的文字
} myChart.setAxisNameY('Values');//y轴的文字
} myChart.setAxisNameColor('#655D5D');//x|y轴的文字的颜色
} myChart.setAxisNameFontSize(9);//x|y轴的文字的大小
} myChart.setAxisPaddingLeft(50);//x轴的左边距
} myChart.setAxisValuesDecimals(1);//设置数字的小数点后的位数
} myChart.setAxisValuesColor('#9C1919');//设置x|y轴的数字颜色
} myChart.setTextPaddingLeft(10);//设置y轴文字的左边距
} myChart.setBarValuesColor('#9C1919');//设置bar数据的颜色
} myChart.setBarBorderWidth(0);//设置bar边框大小
} myChart.setTitleColor('#8C8382');//设置标题文字的颜色
} myChart.setGridColor('#5D5F5D');//设置内部GridView的颜色
} myChart.draw();
} </script>
3）饼状图
将代码：
varmyChart = new JSChart('chartcontainer', 'bar');
改为：
varmyChart = new JSChart('chartcontainer', 'pie');
则显示如下：
} Customerize-pie
} <script type="text/javascript">
} var myData = newArray(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10],['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
} var colors =['#FFCC00', '#FFFF00', '#CCFF00', '#99FF00', '#33FF00', '#00FF66', '#00FF99','#00FFCC', '#FF0000', '#FF3300', '#FF6600', '#FF9900'];
} var myChart = newJSChart('graph', 'pie');
} myChart.setDataArray(myData);//设置数据
} myChart.colorizePie(colors);//设置pie颜色
} myChart.setPiePosition(308,170);//设置pie 位置
} myChart.setPieRadius(95);//设置圆的缩放大小
} myChart.setPieUnitsFontSize(8);//设置pie外文字的大小
} myChart.setTextPaddingTop(30); //设置标题title的上边距
} myChart.setPieUnitsColor('#474747');//设置pie外文字的颜色
} myChart.setPieValuesColor('#474747');//设置pie内文字的颜色
} myChart.setPieValuesOffset(-10);//设置pie内文字的margin
} myChart.setTitleColor('#fff');
} myChart.setSize(616,321); //设置背景大小
} myChart.setBackgroundImage('chart_bg.jpg');//设置背景图片
} //myChart.setTooltip(['Jan','custom<br>contents']);
} myChart.draw();
} </script>
让jsCharts支持中文
正常情况下jsCharts不支持中文字符显示，原因在于JSCharts输出的字符都是它“画”出来的，把代码反编译一下就能发现它最底部附带了数字、英文和常规字符的绘制数据，显而易见，中文是不可能加进去的。
以下插件可以使jsCharts支持中文。如下图所示： 用法有两种：
1 直接用jscharts_mb.js代替jscharts.js；(已经附加到原代码尾部的版本)
2 加载jscharts.js之后再加载jscharts.plugin.mb.js；(独立包含文件的版本)
以上两步任选其一，页面必须编码为UTF-8，
若使用带有中文的xml数据，则xml数据源的编码也要转为UTF-8并且加入encoding="UTF-8"标签；
之后如果要让JSCharts支持中文字符显示，则在生成一个JSChart实例之后紧跟着执行一个函数patchMbString()，如：
var myChart = new JSChart('graph', 'pie');
myChart.patchMbString();
// 接下来的代码和以前一样
如果不执行patchMbString则和原来的没有区别，
此外还加入一个新方法 setFontFamily 用于自定义显示图表的字体，如：
myChart.setFontFamily("微软雅黑"); // 设置显示字体为微软雅黑
另外JSChart默认的字体大小只有8px，如果要较清晰地显示中文的话还得加大字号，这个用自带的接口就可以了，如：
myChart.setAxisValuesFontSize(9); // 设置柱状图和线条图的标尺字体大小为9px
myChart.setPieUnitsFontSize(10); // 设置饼图的项目标识字体大小为10px
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
