Jqplot之折线图
编程技术 / houtizong 发布于 3年前 173
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} } ] }); });
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
