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

最新推荐文章于 2022-09-15 23:54:59 发布

cc_allen_cc

最新推荐文章于 2022-09-15 23:54:59 发布

阅读量9.5k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/caihuajian235/article/details/19206045

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先一个简单的折线图：

直接上代码：

<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功能很强大的，还可以画很多很多的图形。今天只说到这里了。