jQuery Morris是一款數據可視化庫,基于jQuery和Raphael.js,實現了簡單易用、高度可定制化的圖表。它支持多種圖表類型,如折線圖、面積圖、柱狀圖、散點圖、餅圖等,而且可以通過分組、動畫等方式對數據進行細致的呈現。
// 引入必要的文件 <link rel="stylesheet" > <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/raphael@2.3.0/raphael.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/morris.js@0.5.1/morris.min.js"></script> // 數據格式(以折線圖為例) var data = [ { day: '1', visits: 100 }, { day: '2', visits: 150 }, { day: '3', visits: 200 }, { day: '4', visits: 250 }, { day: '5', visits: 300 } ]; // 創建折線圖 Morris.Line({ element: 'chart-container', data: data, xkey: 'day', ykeys: ['visits'], labels: ['訪問量'] });
以上代碼是一個簡單的折線圖示例,我們引入必要的文件并定義數據格式后,通過調用Morris.Line()函數進行創建。函數中的一些參數說明如下:
- element:圖表容器的id
- data:數據格式
- xkey:指定X軸數據的key
- ykeys:指定Y軸數據的key
- labels:指定每一條線的標簽
除了以上幾個參數,Morris庫還支持很多其他的定制化設置,例如設置圖表的顏色、線條樣式、刻度、動畫等等。
總之,如果你需要在網頁上展示數據形式,jQuery Morris是一個高效、靈活的選擇!