使用jquery图表插件jqplot之折线图

最新推荐文章于 2025-05-14 10:05:51 发布

原创最新推荐文章于 2025-05-14 10:05:51 发布 · 9.7k 阅读

2 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

5 篇文章

订阅专栏

本文将介绍如何使用jqplot库绘制简单折线图，并通过代码示例展示如何给图表添加标题、修改坐标轴样式、设置线条样式以及显示坐标点标签等高级功能。从基础到进阶，让你轻松掌握jqplot图表绘制技巧。

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

首先一个简单的折线图：

直接上代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>

<link href="css/jquery.jqplot.css" rel="stylesheet">
<title>chart</title>
</head>
<body>
   <div class="container" align="center">

<div id="chart1" style="height: 270px; width: 830px;"></div>

   </div>
</body>
</html>

demo.js:

$(document).ready(function(){

var data=[[3,7,9,1,4,6,8,2,5]];//这里是折线点的数据，格式[x,y],这里只写了一组数据，默认为y轴上的数据，而x上的数据默认为：1，2，3，4；
var plot1 = $.jqplot ('chart1',data);//第一个参数为显示图表容器ID
});

就这样一个简单的图表就完成了。

我们还可以给它加些东西，比如这样：

代码如下：

$(document).ready(function(){
  var
plot2 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]], {
      // 给图表设置标题
      title:
'Plot With Options',
      

      // 设置坐标系一些属性
      axesDefaults: {

       //给坐标系的一些标签添加渲染效果

        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
      

      // 设置坐标系样式

      axes: {
        

        xaxis: {
          label:
"X Axis",//给X轴添加标题
        },
        yaxis: {
          label:
"Y Axis"
        }
      }
    });
});

还可以变成这样：

代码如下：

$(document).ready(function(){
  // 初始化数据
  var
cosPoints = [];
  for
(var 
i=0; i<2*Math.PI; i+=0.4){ 
    cosPoints.push([i, Math.cos(i)]);
  }
    
  var
sinPoints = []; 
  for
(var 
i=0; i<2*Math.PI; i+=0.4){ 
     sinPoints.push([i, 2*Math.sin(i-.8)]);
  }
    
  var
powPoints1 = []; 
  for
(var 
i=0; i<2*Math.PI; i+=0.4) { 
      powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]);
  }
    
  var
powPoints2 = []; 
  for
(var 
i=0; i<2*Math.PI; i+=0.4) { 
      powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]);
  }
 
  var
plot3 = $.jqplot('chart1', [cosPoints, sinPoints, powPoints1, powPoints2],
    {
      title:'Line Style Options',
      

      // 设置线条的样式

      series:[
          {
            // 设置线条1的宽度和点的样式

            lineWidth:2,
            markerOptions: { style:'dimaond'
}//点的样式为砖石
          },
          {
            
 // 设置线条2的不显示两点之间的线条，设置点的大小和样式

            showLine:false,
            markerOptions: { size: 7, style:"x"
}
          },
          {
           


            markerOptions: { style:"circle"
}//设置点的样式为圆点
          },
          {
            //设置点的样式为正方形
            lineWidth:5,
            markerOptions: { style:"filledSquare", size:10 }
          }
      ]
    }
  );
    
});

还可以做成这样：



代码如下：

//

var labels=["Associates' Direct Cost"];

var lineData=[{"model":"2111-5","cpName":"Associates' Direct Cost","value":"124.12400000","begin":"2013-02-13 00:00:00","end":"2013-04-12 00:00:00","Warehouse":"Homelegance, Inc"}]//这是数据格式

plot = $.jqplot("", lineData, {

        title: "Cost for Model \"" + data[0].model + "\"",

        animate: !$.jqplot.use_excanvas,//禁用扩展插件中的动画效果

        animateReplot: true,//动态画线条

        seriesDefaults: {

            pointLabels:{ //设置坐标点标签

                show:true,

                location:'n',//设置标签显示在坐标点的位置，用英文方向缩写表示的。

                ypadding:3//在垂直方向的偏移量

                }

         },

         cursor:{ //设置光标样式

              show: true,

              zoom:true, //让光标在图表区显示

              showTooltip:false//当光标在图表区时是否显示提示框，提示的是坐标信息

         },

         axes:{

            xaxis:{

                renderer:$.jqplot.DateAxisRenderer,//设置x轴日期渲染插件

                tickOptions:{

                    formatString:'%b %#d, %y',//设置日期显示样式

                    angle: -30

                    }

            },

            yaxis:{

                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,//一种标签渲染插件

                tickOptions : {

                    angle: -30,

                    formatString : '$%.2f'

                }

            }

        },



        legend:{//显示下面的示意图

            renderer: $.jqplot.EnhancedLegendRenderer,//渲染插件

            show:true,

            location: 's',

            labels : labels,//labels指的是每种颜色所表示的东西，这里放的是cp_Name;

            placement:'outside',//设置显示在图表中还是在图表外

            yoffset: 60,//垂直偏移量

            rendererOptions:{

                numberRows: 1//显示多少行

            }

        }        

      });





需要的js文件有：

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>

<script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>

<script type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>

jqplot.enhancedLegendRenderer.min.js，jqplot.dateAxisRenderer.min.js，jqplot.highlighter.min.js，jqplot.pointLabels.min.js，jqplot.cursor.min.js

excanvas.compiled.js，jquery.jqplot.css



jqplot功能很强大的，还可以画很多很多的图形。今天只说到这里了。