jquery图表插件jqPlot实现曲线图
来源：互联网 发布：python pyqt安装 编辑：程序博客网 时间：2024/06/08 13:48
案例：
曲线图
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>曲线图demo</title> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" /> <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js" ></script> <script language="javascript" type="text/javascript" src="jquery.jqplot.js" ></script> <script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.js" ></script> <script type="text/javascript" src="plugins/jqplot.highlighter.js" ></script> <script type="text/javascript" language="javascript"> $(function(){ line1 = [[1,3], [2,7], [3,2], [4,9], [5,16], [6,8], [7,12]]; line2 = [[1,4], [2,5], [3,4], [4,8], [5,13], [6,7], [7,17]]; //详细配置 plot = $.jqplot('chart', [line1,line2], { title: '一周销量情况', //图表表头标题 axes: { xaxis: { min: 0, max: 8}, //准确控制x轴最大值及最小值 yaxis: { min: 0, max: 20, numberTicks: 5}, //准确控制y轴最大值及最小值,间隔个数 xaxis: { ticks:['周日', '周一', '周二', '周三', '周四','周五','周六'], renderer: $.jqplot.CategoryAxisRenderer } }, //series: [{ color: '#5FAB78'}], //定义趋势线颜色 highlighter: { lineWidthAdjust: 50, //当鼠标移动到放大的数据点上时，设置增大的数据点的宽度,目前仅适用于非实心数据点 sizeAdjust: 10, // 当鼠标移动到数据点上时，数据点扩大的增量增量 showTooltip: true, // 是否显示提示信息栏 tooltipLocation: 'nw', // 提示信息显示位置（英文方向的首写字母）: n, ne, e, se, s, sw, w, nw. tooltipAxes: 'xy', // 提示信息框显示数据点那个坐标轴上的值，目前有横/纵/横纵三种方式,值分别为 x, y or xy. tooltipSeparator: ',' // 提示信息栏不同值之间的间隔符号 } }); }); </script> </head> <body style="font-size: 12px"> <span id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span> </body>
