jQuery圖表外掛 jqPlot實現餅狀圖
阿新 • • 發佈：2019-01-25
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>餅狀圖demo</title> <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js" ></script><![endif]--> <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 language="javascript" type="text/javascript" src="plugins/jqplot.pieRenderer.js" ></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ line1 = [['李開復', 3], ['周鴻禕', 7], ['李彥巨集', 2.5], ['馬化騰', 6], ['馬雲', 5], ['丁磊', 4]]; plot1 = $.jqplot('chart', [line1], { title:'2010年度網際網路紅人關鍵詞 ',//設定餅狀圖的標題 seriesDefaults: { fill: true, showMarker: false, shadow: false, renderer:$.jqplot.PieRenderer, rendererOptions:{ diameter: undefined, // 設定餅的直徑 padding: 20, // 餅距離其分類名稱框或者圖表邊框的距離，變相該表餅的直徑 sliceMargin: 9, // 餅的每個部分之間的距離 fill:true, // 設定餅的每部分被填充的狀態 shadow:true, //為餅的每個部分的邊框設定陰影，以突出其立體效果 shadowOffset: 2, //設定陰影區域偏移出餅的每部分邊框的距離 shadowDepth: 5, // 設定陰影區域的深度 shadowAlpha: 0.07 // 設定陰影區域的透明度 } }, legend:{ show: true,//設定是否出現分類名稱框（即所有分類的名稱出現在圖的某個位置） location: 'ne', // 分類名稱框出現位置, nw, n, ne, e, se, s, sw, w. xoffset: 12, // 分類名稱框距圖表區域上邊框的距離（單位px） yoffset: 12, // 分類名稱框距圖表區域左邊框的距離(單位px) } }); }); </script> </head> <body> <div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div> </body> </html>