此文章来源于后羿之弓,转载请注明出处

jschat是一个用来画图的js库,支持饼状图,曲线图,柱状图,感觉还比较好用。示例如下

jschart产生的柱状图

jschart产生的柱状图


其代码如下:

  1. <script type="text/javascript">
  2.     var myData = new Array(['Mar04-Mar05', 21], ['Mar05-Mar06', 28], ['Mar06-Mar07', 12], ['Mar07-Mar08', 17]);
  3.     var colors = ['#AF0202', '#EC7A00', '#FCD200', '#81C714'];
  4.     var myChart = new JSChart('graph', 'bar');
  5.     myChart.setDataArray(myData);
  6.     myChart.colorizeBars(colors);
  7.     myChart.setTitle('Year-to-year growth in home broadband penetration in U.S.');
  8.     myChart.setTitleColor('#8E8E8E');
  9.     myChart.setAxisNameX('');
  10.     myChart.setAxisNameY('%');
  11.     myChart.setAxisColor('#C4C4C4');
  12.     myChart.setAxisNameFontSize(16);
  13.     myChart.setAxisNameColor('#999');
  14.     myChart.setAxisValuesColor('#7E7E7E');
  15.     myChart.setBarValuesColor('#7E7E7E');
  16.     myChart.setAxisPaddingTop(60);
  17.     myChart.setAxisPaddingRight(140);
  18.     myChart.setAxisPaddingLeft(150);
  19.     myChart.setAxisPaddingBottom(40);
  20.     myChart.setTextPaddingLeft(105);
  21.     myChart.setTitleFontSize(11);
  22.     myChart.setBarBorderWidth(1);
  23.     myChart.setBarBorderColor('#C4C4C4');
  24.     myChart.setBarSpacingRatio(50);
  25.     myChart.setGrid(false);
  26.     myChart.setSize(616, 321);
  27.     myChart.setBackgroundImage('chart_bg.jpg');
  28.     myChart.draw();
  29. </script>

其官方地址为:http://www.jscharts.com/