jqPlot圖表外掛使用說明（一）
阿新 • • 發佈：2019-02-17
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jqPlot圖表Demo</title> <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/> <style type="text/css"> .chart-title{ background-color: #999999; margin-bottom: 10px; line-height: 30px; padding-left: 10px; background-color: #efefef; border-bottom:1px solid #dddddd; font-weight: bold; } #chart1{ border: 1px solid #dddddd; } </style> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script><![endif]--> <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script> <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.cursor.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function(){ /** * 第一個引數為body中div的id值 * 第二個引數為要繪製的線形圖中各拐點的取值 * */ var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4, 12, 6, 47, 15, 24, 39, 16, 48, 5, 6, 6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3], [45, 24, 24, 29, 3, 19, 32, 45, 41, 8, 34, 17, 1, 45, 37, 47, 34, 30, 31, 10, 29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49], [43, 23, 37, 12, 26, 11, 29, 29, 22, 27, 25, 5, 18, 34, 20, 3, 8, 16, 41, 19, 9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13] ] var plot = $.jqplot('chart1', data, { title:{ // 標題屬性 text:'<div class="chart-title">2014年5月廣告位投放數量趨勢圖<div>', // 標題文字 show:true, // 是否陰影 fontFamily:'微軟雅黑', // 標題字型 fontSize:14, // 標題字型大小 textAlign:'left', // 標題對齊方式 textColor:'#515151', // 標題顏色（也可以寫作屬性color） escapeHtml:false // 是否轉義HTML字元，值為false時，可以在text屬性中使用HTML程式碼 }, axesDefaults:{ // 預設座標軸屬性 min:0, tickOptions:{ showMark:false } }, axes:{ // 具體座標軸屬性 xaxis:{ label:'日期', ticks:[[1,'05/01'], [5,'05/05'], [10,'05/10'], [15,'05/15'], [20,'05/20'], [25,'05/25'], [30,'05/30']] }, yaxis: { label: '投放數量' } }, legend:{ // 圖例屬性 show:true }, grid:{ // 背景網格屬性 borderWidth:1, shadow:false }, seriesDefaults:{// 預設資料序列屬性 lineWidth:1, markerOptions:{ show:true } }, series:[ // 具體資料序列屬性 { color:'#FF6666', label:'CPC' },{ color:'#0066CC', label:'CPT' },{ color:'#99CC66', label:'CPM' } ], highlighter:{ show:true, tooltipAxes:'y', useAxesFormatters:false, tooltipFormatString:'投放量：%d' } }); }); </script> </head> <body> <!-- 用於繪製圖表，id在JS程式碼中會用到 --> <div id="chart1" style="width:800px;height:400px;"></div> </body> </html>