`

【jqPlot】jqPlot折线图

 
阅读更多

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

 效果图




 
 

 

 

 

  • 大小: 15.2 KB
分享到:
评论

相关推荐

    jqplot折线图和柱状图

    以下是对 jqPlot 在生成折线图和柱状图方面的详细说明。 ### 1. jqPlot简介 jqPlot 是一个轻量级的JavaScript图表库,它依赖于jQuery框架,因此在使用前需要引入jQuery库。jqPlot 支持多种浏览器,包括IE6+、Fire...

    Jqplot之折线图

    NULL 博文链接:https://antlove.iteye.com/blog/2116774

    jqplot多条折线拖动的设定

    在本教程中,我们将深入探讨如何使用jqPlot库创建一个具有多条可拖动折线图的设置。jqPlot是一个JavaScript图表库,它允许开发者轻松地在网页上绘制各种图表,包括折线图、柱状图等。在这个特定的例子中,我们将关注...

    jqplot柱状图、饼形图、折线图

    在jqPlot中创建折线图: 1. **数据准备**:需要一个数组,其中每个元素是时间序列数据点,包含两个值:x轴值(时间)和y轴值。 2. **创建容器**。 3. **初始化jqPlot**: ```javascript var plot3 = $.jqplot('...

    可拖动的折线图jqplot

    【可拖动的折线图jqplot】是一个用于创建交互式折线图的JavaScript库,尤其适用于数据分析和可视化。这个库允许用户通过鼠标操作来直接拖动折线上的数据点,从而动态改变图表数据,更好地理解和探索数据变化趋势。...

    报表制作 曲线图 饼图 折线图 jquery.jqplot 水晶报表

    报表制作 曲线图 饼图 折线图 jquery.jqplot水晶报表 制作图表,统计,汇总,预测比较实用,结合流行的jquery技术,更是能大大提高工作效率,使用的灵活性高,可以做出动态、时时的效果。

    jfreechart折线图demo

    例如,`jquery.jqplot.js` 是一个基于 JQuery 的图表库,它可以与 JFreeChart 生成的折线图数据相结合,实现动态更新、缩放、平移等功能。 5. **相关库的使用** - **jQuery**: 一个流行的 JavaScript 库,简化了 ...

    jqplot

    它提供了一套全面的API,使得开发者能够方便地创建各种复杂的图表,如折线图、柱状图、饼图以及散点图等。jqPlot 被誉为“非常强大的图表工具”,其优点在于灵活性高、可定制性强,能够适应各种项目需求。 **主要...

    fusionChars,highchars,jqplot绘图插件Demo

    它支持多种图表类型,如折线图、柱状图、饼图、散点图以及组合图表等,适用于各种数据展示需求。该插件的一大优点在于其灵活性,允许开发者通过设置各种配置参数来调整图表的外观和行为。 `fusionChars`和`...

    Jquery的画图插件-jqPlot

    - **多样的图表类型**:jqPlot支持折线图、柱状图、饼图、散点图、面积图等多种图表类型,满足不同的数据展示需求。 - **实时更新**:能够动态更新数据,实现图表的实时变化,适用于监控和数据分析场景。 - **交互性...

    jqplot图形报表开发

    jqPlot支持多种图表类型,包括折线图、柱状图、饼图、散点图以及热力图等。这些图表可以用于数据对比、趋势分析和信息可视化。通过灵活的配置选项,你可以自定义图表的颜色、线条样式、标记形状以及轴的刻度和标签,...

    Jqplot-Jquery数据图插件

    Jqplot支持多种图表类型,包括折线图、柱状图、饼图、散点图、雷达图等,这些图表可以满足大多数数据分析和展示的需求。通过简单的配置,开发者可以轻松地切换不同类型的图表,以适应不同的数据表现形式。 2. **...

    折线图相关代码

    折线图部分代码,关于Jqplot_Jquery部分功能的演练

    jqplot js图标控件

    **jqPlot**是一款基于JavaScript库**jQuery**的图表绘制插件,主要用于在Web页面上创建各种数据可视化图表,包括但不限于柱状图、折线图、饼图、散点图等统计图表。它提供了丰富的定制选项,可以满足用户对图表样式...

    jqplot,Ajax做的性能实时监控动态图

    1. **多种图表类型**:Jqplot支持折线图、柱状图、饼图、散点图等多种图表,适合各种数据可视化需求。 2. **交互性**:用户可以通过鼠标悬停、点击等操作获取图表上的详细数据,增强了用户体验。 3. **自定义丰富**...

    jqPlot图表中文API

    例如,创建一个简单的折线图: ```javascript $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]); ``` jqPlot提供了丰富的可配置选项(options)来定制图表的外观和行为。以下是...

    jqplot使用手册 参数手册 中文手册

    例如,创建一个简单的折线图: ```javascript var data = [[1, 2], [3, 5], [6, 8]]; var options = { title: '我的图表', axes: { xaxis: { label: 'X轴' }, yaxis: { label: 'Y轴' } } }; $.jqplot('...

    jquery.jqplot图表源码

    jQuery.jqPlot是一款基于JavaScript的开源图表库,它提供了丰富的图表类型,包括折线图、柱状图、饼图、散点图等,适用于网页上的数据可视化。该库设计简洁,易于使用,允许开发者自定义各种图表样式和交互功能,...

Global site tag (gtag.js) - Google Analytics