三月 6th, 2009javascript绘图之jschart
此文章来源于后羿之弓,转载请注明出处
jschat是一个用来画图的js库,支持饼状图,曲线图,柱状图,感觉还比较好用。示例如下

jschart产生的柱状图
其代码如下:
- <script type="text/javascript">
- var myData = new Array(['Mar04-Mar05', 21], ['Mar05-Mar06', 28], ['Mar06-Mar07', 12], ['Mar07-Mar08', 17]);
- var colors = ['#AF0202', '#EC7A00', '#FCD200', '#81C714'];
- var myChart = new JSChart('graph', 'bar');
- myChart.setDataArray(myData);
- myChart.colorizeBars(colors);
- myChart.setTitle('Year-to-year growth in home broadband penetration in U.S.');
- myChart.setTitleColor('#8E8E8E');
- myChart.setAxisNameX('');
- myChart.setAxisNameY('%');
- myChart.setAxisColor('#C4C4C4');
- myChart.setAxisNameFontSize(16);
- myChart.setAxisNameColor('#999');
- myChart.setAxisValuesColor('#7E7E7E');
- myChart.setBarValuesColor('#7E7E7E');
- myChart.setAxisPaddingTop(60);
- myChart.setAxisPaddingRight(140);
- myChart.setAxisPaddingLeft(150);
- myChart.setAxisPaddingBottom(40);
- myChart.setTextPaddingLeft(105);
- myChart.setTitleFontSize(11);
- myChart.setBarBorderWidth(1);
- myChart.setBarBorderColor('#C4C4C4');
- myChart.setBarSpacingRatio(50);
- myChart.setGrid(false);
- myChart.setSize(616, 321);
- myChart.setBackgroundImage('chart_bg.jpg');
- myChart.draw();
- </script>
其官方地址为:http://www.jscharts.com/