jqPlot圖表外掛使用說明（二）
阿新 • • 發佈：2019-02-03
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>給柱狀圖配置屬性</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"></script> <!-- jqplot.barRenderer.min.js為$.jqplot.BarRenderer渲染器所在JS檔案 --> <script src="js/jqPlot/1.0.4/plugins/jqplot.barRenderer.min.js" type="text/javascript" ></script> <!-- jqplot.categoryAxisRenderer.min.js用於控制X軸標籤的展示渲染 --> <script src="js/jqPlot/1.0.4/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript" ></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $.jqplot('chart1', [[75, 62, 96, 81], [46, 82, 70, 92], [58, 33, 82, 88]], { title:{ // 標題屬性 text:'<div class="chart-title">2013年各季度廣告位投放數量對比圖（非真實資料）<div>',// 標題文字 show:true, // 是否陰影 fontFamily:'微軟雅黑', // 標題字型 fontSize:14, // 標題字型大小 textAlign:'left', // 標題對齊方式 textColor:'#515151', // 標題顏色（也可以寫作屬性color） escapeHtml:false // 是否轉義HTML字元，值為false時，可以在text屬性中使用HTML程式碼 }, seriesDefaults:{ renderer:$.jqplot.BarRenderer, pointLabels: { // 顯示資料點，依賴於jqplot.pointLabels.min.js檔案 show: true }, showLabel:true }, series:[ // 具體資料序列屬性 { color:'#FF6666', label:'CPC' },{ color:'#0066CC', label:'CPT' },{ color:'#99CC66', label:'CPM' } ], axesDefaults:{ // 預設座標軸屬性 min:0, tickOptions:{ showMark:false } }, axes:{ // 具體座標軸屬性 xaxis:{ renderer: $.jqplot.CategoryAxisRenderer, ticks:['第一季度', '第二季度', '第三季度', '第四季度'], label:'季度' }, yaxis: { label: '投放數量' } }, legend:{ // 圖例屬性 show:true, placement: 'outsideGrid' // 設定圖例位於圖表外部 } }); }); </script> </head> <body> <div id="chart1" style="width: 800px;height: 400px;"> <!-- 描述：圖表展示區域 --> </div> </body> </html>
效果如下：