使用jquery图表插件jqplot之折线图
首先一個簡單的折線圖：
直接上代碼：
?<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.min.js"></script><!-- 這是必要的js庫,最好順序不要錯，不然要報錯-->
<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]];//這里是折線點的數(shù)據(jù)，格式[x,y],這里只寫了一組數(shù)據(jù)，默認(rèn)為y軸上的數(shù)據(jù)，而x上的數(shù)據(jù)默認(rèn)為：1，2，3，4；
? var plot1 = $.jqplot ('chart1',data);//第一個參數(shù)為顯示圖表容器ID
});
就這樣一個簡單的圖表就完成了。
我們還可以給它加些東西，比如這樣：
代碼如下：
$(document).ready(function(){ ??var plot2 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]], { ??????// 給圖表設(shè)置標(biāo)題 ??????title: 'Plot With Options', ???????????// 設(shè)置坐標(biāo)系一些屬性 ??????axesDefaults: {
?????? //給坐標(biāo)系的一些標(biāo)簽添加渲染效果
????????labelRenderer: $.jqplot.CanvasAxisLabelRenderer ??????}, ?????
??????// 設(shè)置坐標(biāo)系樣式
??????axes: { ???????
????????xaxis: { ??????????label: "X Axis",//給X軸添加標(biāo)題 ????????}, ????????yaxis: { ??????????label: "Y Axis" ????????} ??????} ????}); });
還可以變成這樣：
代碼如下：
$(document).ready(function(){ ??// 初始化數(shù)據(jù) ??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', ???????????// 設(shè)置線條的樣式
??????series:[ ??????????{ ????????????// 設(shè)置線條1的寬度和點的樣式
????????????lineWidth:2, ????????????markerOptions: { style:'dimaond' }//點的樣式為磚石 ??????????}, ??????????{ ??????????? ?// 設(shè)置線條2的不顯示兩點之間的線條，設(shè)置點的大小和樣式
????????????showLine:false, ????????????markerOptions: { size: 7, style:"x" } ??????????}, ??????????{ ??????????
????????????markerOptions: { style:"circle" }//設(shè)置點的樣式為圓點 ??????????}, ??????????{ ????????????//設(shè)置點的樣式為正方形 ????????????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"}]//這是數(shù)據(jù)格式
plot = $.jqplot("", lineData, {
?? ???? title: "Cost for Model \"" + data[0].model + "\"",
?? ???? animate: !$.jqplot.use_excanvas,//禁用擴展插件中的動畫效果
?? ???? animateReplot: true,//動態(tài)畫線條
?? ???? seriesDefaults: {
?? ???????? pointLabels:{ //設(shè)置坐標(biāo)點標(biāo)簽
?? ??????? ??? ?show:true,
?? ??????? ??? ?location:'n',//設(shè)置標(biāo)簽顯示在坐標(biāo)點的位置，用英文方向縮寫表示的。
??????????????? ypadding:3//在垂直方向的偏移量
?? ??????? ??? ?}
?? ????? },
?? ????? cursor:{ //設(shè)置光標(biāo)樣式
?? ?????????? show: true,
?? ?????????? zoom:true, //讓光標(biāo)在圖表區(qū)顯示
?? ?????????? showTooltip:false//當(dāng)光標(biāo)在圖表區(qū)時是否顯示提示框，提示的是坐標(biāo)信息
?? ????? },
?? ????? axes:{
?? ???????? xaxis:{
?? ???????????? renderer:$.jqplot.DateAxisRenderer,//設(shè)置x軸日期渲染插件
?? ???????????? tickOptions:{
?? ??????????? ??? ?formatString:'%b %#d, %y',//設(shè)置日期顯示樣式
?? ??????????? ??? ?angle: -30
?? ??????????? ??? ?}
?? ???????? },
?? ??? ??? ?yaxis:{
?? ??? ??? ??? ?labelRenderer: $.jqplot.CanvasAxisLabelRenderer,//一種標(biāo)簽渲染插件
?? ??? ??? ??? ?tickOptions : {
?? ??? ??? ??? ??? ?angle: -30,
?? ??? ??? ??? ??? ?formatString : '$%.2f'
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ???? },
?? ???? legend:{//顯示下面的示意圖
??????????? renderer: $.jqplot.EnhancedLegendRenderer,//渲染插件
??????????? show:true,
??????????? location: 's',
??????????? labels : labels,//labels指的是每種顏色所表示的東西，這里放的是cp_Name;
??????????? placement:'outside',//設(shè)置顯示在圖表中還是在圖表外
??????????? 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功能很強大的，還可以畫很多很多的圖形。今天只說到這里了。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎
總結(jié)
以上是生活随笔為你收集整理的使用jquery图表插件jqplot之折线图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js 生成二维码
- 下一篇： 运行Arcgis和SWAT模型遇到Err