案例:(里面导入的js和css可以到官方网上下载)
柱状图(1)
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>柱状图demo1</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js" ></script><![endif]-->
- <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
- <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js" ></script>
- <script language="javascript" type="text/javascript" src="jquery.jqplot.js" ></script>
- <!-- plugin -->
- <script type="text/javascript" src="plugins/jqplot.barRenderer.js" ></script>
- <script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.js" ></script>
- <script type="text/javascript" language="javascript">
- $(function(){
- line1 = [4, 2, 9, 16]; //子统计1数据
- line2 = [3, 7, 6.25, 3.125]; //子统计2数据
- //--最简
- plot = $.jqplot('chart', [line1], {
- seriesDefaults: {
- renderer: $.jqplot.BarRenderer, //使用柱状图表示
- rendererOptions: {
- &nb