jQuery Charts是一款基于jQuery的圖表插件,它提供了豐富的圖表類型和可定制化的選項,可供開發者在網頁中快速生成漂亮的數據可視化圖表。
在使用jQuery Charts前,需要先引入jQuery庫和Charts插件。可以在HTML文件中添加以下代碼:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.3/dist/apexcharts.min.js"></script>
接下來可以通過JavaScript代碼來創建圖表,例如以下代碼可以創建一張柱形圖:
var options = { series: [{ name: '銷售額', data: [30, 40, 35, 50, 49, 60, 70, 91, 125, 135, 155, 174] }], chart: { type: 'bar', height: 350 }, plotOptions: { bar: { horizontal: false, columnWidth: '55%', endingShape: 'rounded' }, }, dataLabels: { enabled: false, }, stroke: { show: true, width: 2, colors: ['transparent'] }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], }, yaxis: { title: { text: '$(USD)' } }, fill: { opacity: 1 }, tooltip: { y: { formatter: function (val) { return "$" + val + "k" } } } }; var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render();
以上的代碼通過創建一個options變量來定義圖表的各種屬性和數據,接著使用new ApexCharts方法將其應用到HTML元素上,并最終通過render()方法來將圖表呈現在頁面中。