欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Jqplot之折线图

程序员文章站 2022-05-27 13:26:40
...

timeseriesChart.html

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


<script type="text/javascript" src="jslib/jqplot.highlighter.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.canvasAxisLabelRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.logAxisRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.canvasTextRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.canvasAxisTickRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.dateAxisRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.categoryAxisRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.barRenderer.min.js"></script>  
  
<script type="text/javascript" src="timeseriesChart.js"></script>  

<link type="text/css" rel="stylesheet" href="css/jquery.jqplot.min.css"/>  
  
<div id="chart"></div>  

 timeseriesChart.js

$(document).ready(function(){  
      var line1=[['2008-09-30', 4], ['2008-10-30', 6.5], ['2008-11-30', 5.7], ['2008-12-30', 9],  
                 ['2009-01-30', 8.2], ['2009-02-28', 7.6], ['2009-03-30', 11.4], ['2009-04-30', 16.2],   
                 ['2009-05-30', 21.8], ['2009-06-30', 19.3], ['2009-07-30', 29.7], ['2009-08-30', 36.7],  
                 ['2009-09-30', 38.7], ['2009-10-30', 33.7], ['2009-11-30', 49.7], ['2009-12-30', 62.7]];   
                 
      var line2 = [['2008-09-30', 41], ['2008-10-30', 61.5], ['2008-11-30', 51.7], ['2008-12-30', 9]];  

      var plot1 = $.jqplot('chart', [line1,line2 ], {  
        title:'Data Point Highlighting',  
        axes:{  
            xaxis:{  
                renderer:$.jqplot.DateAxisRenderer,  
                tickOptions:{  
                    formatString:'%Y-%m-%#d'  
                },  
                label:'x label value ... '
            },  
            yaxis:{  
                tickOptions:{  
                      formatString:'%.0f',  
                      angle:-30   
                },  
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,  
                    labelOptions:{                   
                    fontFamily:'Helvetica',                   
                    fontSize: '14pt'              
                },   
                label:'y label value ... ',
                min:0  // set the min value for the y axis
            }  
        },  
        highlighter: {  
            show: true,  
            sizeAdjust: 7.5,  
            showMarker:true,  
            tooltipAxes: 'y',  
            yvalues: 4,  
            formatString:'<table class="jqplot-highlighter"><tr><td>value:</td><td>%s</td></tr></table>'  
  
        } ,
        series:[   
              {},   
              {  
                showLine:false,   
                markerOptions: { size: 7}  
              }  
         ]  
      });  
});