jquery图表插件jqPlot之hello world-优快云博客

本文介绍如何使用jqPlot插件在网页中生成图表，包括基本使用方法、自定义图表样式以及展示实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jqPlot是一个纯客户端生成图标的jqeury插件。官方网站地址：http://www.jqplot.com/

要使用jqPlot至少使用jquery1.4+,在页面包含以下文件就能使用基本功能了：

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

首先，要在页面放一个图表的容器，必须给容器设置高度。

<div id="chartdiv" style="height:400px;"></div>

接下来就可以调用plot插件生成一个图表：

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

最简单的图表出来了：

你可以传入其他参数自定义控制图表显示：

var datas = [[['2011-08-01', 15], ['2011-08-22', 500], ['2011-09-03',100], ['2011-09-12', 336], ['2011-09-25', 259], ['2011-09-28', 199]]];
        $.jqplot('chartdiv',datas,
        {
            series: [{ showMarker: false}],
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    label: '时间',
                    tickOptions: {
                        formatString: '%Y-%m-%d'
                    }
                },
                yaxis: {
                    label: '用户数'
                }
            } 
        });

效果如下：