jQuery是一個廣泛使用的JavaScript庫,它可以極大地簡化在網頁中使用JavaScript的復雜性。其中一個功能是使用jQuery制作餅狀圖。制作餅狀圖可以使網頁更加生動有趣,并且能夠在有限的空間中呈現大量的數據。
以下是一個通過jQuery和插件jQuery Pie Chart實現的簡單的餅狀圖。使用pre標簽顯示代碼如下:
<!DOCTYPE html> <html> <head> <title>Pie Chart</title> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-pie-chart/1.1.0/jquery-pie-chart.min.js"></script> </head> <body> <div id="chart"></div> <script> var data = [ { label: "Apple", value: 30 }, { label: "Banana", value: 20 }, { label: "Cherry", value: 15 }, { label: "Durian", value: 25 }, { label: "Elderberry", value: 10 } ]; $("#chart").pieChart({ data: data, title: "Fruit Distribution", height: 300, width: 300, colors: ["#ff0000", "#ffa500", "#ffff00", "#008000", "#0000ff"] }); </script> </body> </html>
代碼中使用了jQuery和jQuery Pie Chart插件。data數組包含每個水果的數據。pieChart插件調用使用data和其他選項,例如標題,高度,寬度和顏色。這個簡單的例子僅僅是一個基礎,你可以通過API文檔和其他示例來學習如何更改和自定義圖表。