【jqPlot】jqPlot折线图

pdw00 2014-07-12

1）首先引入必须的css和js文件

<link href="<%=contextPath %>/lib/jqplot/jquery.jqplot.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/jquery.min.js"></script>
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.highlighter.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.cursor.min.js"></script> 
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.dragable.min.js"></script>


 2）在<body>上先定义一个div容器

<body>
   <div id="chartContainer"/>
</body>

 
3）折线图（简单配置）

var date = [['2014-07-01',1],['2014-07-02',2],['2014-07-03',3],['2014-07-04',4],['2014-07-05',5],['2014-07-06',6],['2014-07-07',7]];
$.jqplot('chartContainer', [date], {
	//标题
	title : '最近七天订单销售金额', 
	//线(默认配置)
	seriesDefaults : {  
        rendererOptions : {  
            animation: {  
                show: true  
            }  
        }
    }, 
  	//轴 (默认配置)
	axesDefaults: { 
		tickRenderer : jQuery.jqplot.CanvasAxisTickRenderer,
		pad : 1.2
    }, 
    //轴(具体配置)
	axes : {
		xaxis : { //设置X轴
			label : '销售时间',
			renderer : $.jqplot.DateAxisRenderer,  
		 	tickOptions : {  
            	angle : 0,
            	formatString: '%Y-%m-%d'
            } 
		},
		yaxis : { //设置Y轴
			label : '销售金额'
		}
	},
	//数据点提示框
	highlighter : {  
        show : true,
        tooltipContentEditor : function(xydata, seriesIndex, pointIndex, plot) {  
            return '<span style="font-size:15px;">' +  xydata + '</span>';  
        }  
    } 
});

 

        4）折线图（复杂配置）

//构造数据
var date = [['2014-07-01',1],['2014-07-02',2],['2014-07-03',3],['2014-07-04',4],['2014-07-05',5],['2014-07-06',6],['2014-07-07',7]];
//构造chart
$.jqplot('Near7DaysOrdersMoneyChart', [date], {
	//标题
	title : '最近七天订单销售金额', 
	//线(默认配置)
	seriesDefaults : {  
		show: true,     
		showLine: true,
		showMarker: true,
		fill : true, //填充折线以下的面积
		fillAndStroke: true, //在fill为true的状态下，在填充区域最上面显示一条线（如果是折线图则显示该折线）
		fillColor: '#467DB4',   // 设置填充区域的颜色  
                fillAlpha: 0.5,  // 梃置填充区域的透明度  
		shadow: true,
		shadowAngle: 45,    
        shadowOffset: 1.25, 
        shadowDepth: 3,     
        shadowAlpha: 0.1,  
        lineWidth: 4, 
        rendererOptions : {  
            animation: {  
                show: true  
            }  
        },  
        //在数据点上展示值
        pointLabels : {  
            show : true  
        },
        markerRenderer: $.jqplot.MarkerRenderer,
        //数据点配置
        markerOptions: {   
            color: '#467DB4',    // 数据点的颜色  
        }  
    },  
    //线(具体配置)
    series : [{
    	color : '#467DB4'
    }],
  	//轴 (默认配置)
	axesDefaults: { 
		tickRenderer : jQuery.jqplot.CanvasAxisTickRenderer,
		pad : 1.2
    }, 
    //轴(具体配置)
	axes : {
		xaxis : { //设置X轴
			label : '销售时间',
			renderer : $.jqplot.DateAxisRenderer,  
		 	tickOptions : {  
            	angle : 0,
            	formatString: '%Y-%m-%d'
            } 
		},
		yaxis : { //设置Y轴
			label : '销售金额'
		}
	},
	//分类框
	legend : {  
        renderer : jQuery.jqplot.EnhancedLegendRenderer,  
        show : true,  
        location : 'ne',  
        placement : 'inside',  
        fontSize : '12px',  
        rowSpacing : '1px',
        labels : ['Series1']
    },  
	//数据点提示框
	highlighter : {  
        show : true,
        tooltipContentEditor : function(xydata, seriesIndex, pointIndex, plot) {  
            return '<span style="font-size:15px;">' +  xydata + '</span>';  
        }  
    } 
});

 效果图



【jqPlot】jqPlot折线图
 
 

pdw00

pdw00

相关推荐

web报表插件

Flotr2是个独立框架库，支持HTML5图表和图形。它是flotr的一个分支版本，移除了Prototype依赖性，并且有很多改进。jqplot是一款非常不错的基于jquery的图表插件，这篇文章主要帮助大家整理了jqplot的中文使用说明和在线示例及源码

Burgdan / 0评论 2015-06-11

Jqplot之柱状图

var barData = [[2,"a"], [4,"b"], [6,"c"], [3,"d"]] ;

西门吹雪 / 0评论 2014-09-15

Jqplot之折线图

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.

pjk / 0评论 2014-09-15

【jqPlot】jqPlot饼图

<body>. <div id="chartContainer"/>

rou / 0评论 2014-07-14

【jqPlot】jqPlot柱状图

<body>. <div id="chartContainer"/>. </body>3）柱状图。//构造数据。v

amyleeYMY / 0评论 2014-07-14

【jqPlot】jqPlot入门

由于项目信息统计需要生成一些图表，找了一些免费的开源框架，最后决定使用jqPlot。该渲染器比较适合与柱状图联合使用。该渲染器相关引用包一旦引用到当前页面会，该渲染器立即生效。默认显示值是横纵坐标轴刻度值。当然，提示框中信息是可以根据自身需要定制的。

javaweiming / 0评论 2014-07-12

jquery用jqplot插件画图例子

l1=[2,3,1,4,3];l2=[1,4,3,2,5];line1=[['2008-09-30',4],['2008-10-30',6.5],['2008-11-30',5.7],['2008-12-30',9],['2009-01-30',8.2]]

xiuping0 / 0评论 2013-01-29

jqPlot——基于jquery的页面图表绘制工具

可能是个人认识能力有限，一直认为仅仅靠html是很难展现稍具动态的图表的，但是在看到jqPlot之后，我的认识有了很大改变，jqplpt——基于HTML的图表展示插件，而且不生成图片，最可贵的是能生成类似flex的数据动态提示以及动态改变数据展示范围等等。

maple00 / 0评论 2012-10-29

jqPlot 图形报表插件柱状图(jquery)

ticks:['区域1', '区域2', '区域3', '区域4'],

83570690 / 0评论 2012-10-29

jqPlot 实现动态显示数据，防止内存溢出的实现。

jqPlot是一个十分强大、功能丰富的图表插件，能够显示走势图、柱形图等常用的图表类型，相信国内用的人很多。大家在使用jqPlot动态更新图表时，也许会碰到过在IE中出现内存溢出的问题，下面我们来看看集中动态更新jqPlot图表的方式：。*

ningwentao / 0评论 2012-09-12

jqplot前端图形报表2

<%@ page language="java" contentType="text/html; charset=UTF-8". <!<meta http-equiv="Content-T

Sincelily / 0评论 2011-10-25

使用jQuery jqPlot插件绘制柱状图

在一个项目研发过程中，需要显示账户的资金情况，为了给客户良好的体验我们采用了柱状图形展现，绘图的过程如果使用原生态脚本绘制这样比较麻烦，时间也会比较长，所以我们选择了jqPlot插件进行绘制，这样可以节省大量的时间，也能很快就能展示给用户。

84533871 / 0评论 2019-04-19

手把手教你jQuery jqPlot画图插件

jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且，jqPlot具有插件可扩展性，你可以编写自己的图表样式。以上功能在jqPlot主页中的示例页面有很多直观的展示。这里是它详细使用文档

89580498 / 0评论 2011-04-28

jqPlot jquery的页面图表绘制工具

jqplot是基于一个基本的jqplot.js文件，并有多个js文件支持的插件――也就是说jqplot.js文件只能支持线状图的绘制，对于饼状图，柱状图等图形需要引入pieRenderer.js等文件。这里参照jqPlot的官方文档，以饼状图为例简单的说一

舜岳 / 0评论 2009-07-25