JSP 後台數據前端圖表展示：jqChart 實現柱狀圖/餅圖完整教程

需求

後台傳遞 JSON 數據，前端以柱狀圖、餅圖等形式可視化，用於監控大屏/報表。

技術選型：jqChart (jQuery 插件)

• 輕量、API 簡單、支持柱狀、線性、餅圖、雷達、儀表盤等。
• 依賴：jquery.js、jquery.jqChart.min.js、jquery.jqChart.css、excanvas.js (IE8- 兼容)。
• 下載：jqChart 示例包（含文檔、樣例）。

三步接入

1. 引入資源：

   
   <link href="jquery.jqChart.css" rel="stylesheet">
   <script src="jquery.js"></script>
   <script src="excanvas.js"></script> <!-- IE8- -->
   <script src="jquery.jqChart.min.js"></script>
   

2. 準備容器：<div id="chart" style="width:600px;height:400px;"></div>
3. 數據綁定（以柱狀圖為例）：

   
   $(function() {
     // 假設後台返回：[{label:"產品A", value:120}, {label:"產品B", value:90}, ...]
     $.getJSON('/api/chartData', function(data) {
       $('#chart').jqChart({
         title: { text: '月度銷售額' },
         animation: { enabled: true },
         series: [{
           type: 'column',
           data: data.map(d => [d.label, d.value]) // [[label, value], ...]
         }],
         axes: [
           { location: 'left', type: 'linear' },
           { location: 'bottom', type: 'category' }
         ]
       });
     });
   });
   

進階配置

• 多系列/堆疊：series: [{type:'column', data:...}, {type:'column', data:...}] + stacked: true。
• 工具提示/點擊事件：tooltips: { stringFormat: '%.2f' }, click: function(e, data) { ... }。
• 響應式：容器 width:100%，窗口 resize 時 $('#chart').jqChart('update')。

替代方案對比

jqChart 適合「jQuery 老項目快速接入」，新項目**強烈推薦 ECharts 或 AntV**，功能更豐富、社區更活躍、長期維護有保障。