当前位置:首页 > 开发 > Web前端 > 前端 > 正文

Jqplot之折线图

发表于: 2014-09-15   作者:antlove   来源:转载   浏览:
摘要: timeseriesChart.html <script type="text/javascript" src="jslib/jquery.min.js"></script> <script type="text/javascript" src="jslib/excanvas.min.js&

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}  
              }  
         ]  
      });  
});  

 

 

Jqplot之折线图

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1)首先引入必须的css和js文件 <link href="<%=contextPath %>/lib/jqplot/jquery.jqplot.
barChart.html <script type="text/javascript" src="jslib/jquery.min.js"></script>
1、首先下载Jqplot插件 下载 2、将下载后的 plugins文件夹、jquery.jqplot.min.js、jquery.jqplot.m
1、首先下载Jqplot插件 下载 2、将下载后的 plugins文件夹、jquery.jqplot.min.js、jquery.jqplot.m
5 jqPlot
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces
JS图表,有HighCharts、JqPlot、JsChart,其中HighCharts和JsChart只能用作个人使用、为了以后项目
需求: 用R语言画折线图 实现: xiao <- read.table("d:/final.txt",header=T,sep=",") data<
需求: 用R语言画折线图 实现: xiao <- read.table("d:/final.txt",header=T,sep=",") data<
最近在学着做android自定义控件,为熟练Canvas与Paint的使用方法而写了个折线图控件。效果如下: 图
同样是一个渲染器,一个数据集,不过和饼图的还是有区别的,渲染器和数据集的对象都不一样,如下:
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号