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完整的生成折线图和柱状图例子
jqplot 柱状图源代码、饼形图源代码、折线图源代码
里面有可以设置折线拖动的包。 具体自己实现吧。
报表制作 曲线图 饼图 折线图 jquery.jqplot水晶报表 制作图表,统计,汇总,预测比较实用,结合流行的jquery技术,更是能大大提高工作效率,使用的灵活性高,可以做出动态、时时的效果。
折线图部分代码,关于Jqplot_Jquery部分功能的演练
主要介绍了
jqplot是一个十分强大的jQuery绘制图表的插件,支持折线图、柱状图、饼图等等多种形态。
jqplot-bar-highlighter-plugin 此仓库包含对jqplot条形图插件的一些修复: jqplot.barRenderer.js-条形图未选择正确的highlightColors选项。 修改适应: : 。 在以下行将pidx替换为sidx: var ...为折线图添加水平虚线
一个网站的关于饼图 柱状图 折线图的一些js实例
jqPlot生成具有许多功能的精美折线图,条形图和饼图: 多种图表样式选项。 具有可自定义格式的日期轴。 最多9个Y轴。 旋转轴文本。 自动趋势线计算。 工具提示和数据点突出显示。 明智的默认设置,易于使用...
jqplot是一个十分强大的jQuery绘制图表的插件,支持折线图、柱状图、饼图等等多种形态
demo展示了android如何使用各种图表,其中包括折线图和饼图,图表类型有 echarts flotr2 highcharts jqplot四种,其中highcharts是收费的,echarts视频效果最棒,不过可能手机型号不同会出现些异常,比如背景变黑