Highcharts与Spring Boot完美融合打造动态数据可视化解决方案 从零开始学习如何在Java Web应用中集成强大图表功能实现数据驱动决策

威震华夏关云长

引言

在当今数据驱动的时代，数据可视化已成为企业决策过程中不可或缺的一环。通过直观的图表展示，复杂的数据集变得易于理解，帮助决策者快速识别趋势、模式和异常。Highcharts作为一款功能强大的JavaScript图表库，与Spring Boot这一流行的Java框架相结合，可以创建出既美观又实用的数据可视化解决方案。本文将详细介绍如何从零开始，将Highcharts与Spring Boot完美融合，打造动态数据可视化系统。

1. Highcharts与Spring Boot概述

1.1 Highcharts简介

Highcharts是一个基于纯JavaScript的图表库，支持多种图表类型，包括线图、柱状图、饼图、散点图等。它具有以下特点：

• 兼容性好：支持所有现代浏览器，包括移动端浏览器
• 图表类型丰富：提供超过20种图表类型
• 高度可定制：支持自定义图表的各个方面
• 动态更新：支持实时数据更新
• 导出功能：支持将图表导出为图片、PDF等格式

1.2 Spring Boot简介

Spring Boot是Spring框架的一个子项目，旨在简化Spring应用的创建和开发过程。它具有以下特点：

• 自动配置：根据依赖自动配置Spring应用
• 内嵌服务器：如Tomcat、Jetty等，无需部署WAR文件
• 生产就绪：提供监控、健康检查等生产环境所需功能
• 无代码生成：无需生成代码，无需XML配置

1.3 为什么选择Highcharts与Spring Boot结合

将Highcharts与Spring Boot结合有以下优势：

• 前后端分离：Spring Boot提供RESTful API，Highcharts负责前端展示
• 高效开发：Spring Boot简化后端开发，Highcharts简化图表创建
• 实时数据：Spring Boot可以轻松实现数据推送，Highcharts支持实时更新
• 生态系统：两者都有庞大的社区和丰富的文档资源

2. 环境搭建与项目初始化

2.1 开发环境准备

在开始之前，确保以下开发环境已准备就绪：

• JDK 8或更高版本
• Maven 3.6或更高版本
• IDE（如IntelliJ IDEA或Eclipse）
• 现代浏览器（如Chrome、Firefox等）

2.2 创建Spring Boot项目

可以通过Spring Initializr（https://start.spring.io/）快速创建SpringBoot项目，或使用IDE的Spring项目创建功能。

以下是使用Maven创建Spring Boot项目的pom.xml文件基本配置：

2. <?xml version="1.0" encoding="UTF-8"?>
3. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
5.     <modelVersion>4.0.0</modelVersion>
6.     <parent>
7.         <groupId>org.springframework.boot</groupId>
8.         <artifactId>spring-boot-starter-parent</artifactId>
9.         <version>2.7.5</version>
10.         <relativePath/> <!-- lookup parent from repository -->
11.     </parent>
12.     <groupId>com.example</groupId>
13.     <artifactId>highcharts-spring-boot-demo</artifactId>
14.     <version>0.0.1-SNAPSHOT</version>
15.     <name>highcharts-spring-boot-demo</name>
16.     <description>Demo project for Spring Boot with Highcharts</description>
17.    
18.     <properties>
19.         <java.version>11</java.version>
20.     </properties>
21.    
22.     <dependencies>
23.         <!-- Spring Boot Web -->
24.         <dependency>
25.             <groupId>org.springframework.boot</groupId>
26.             <artifactId>spring-boot-starter-web</artifactId>
27.         </dependency>
28.         
29.         <!-- Spring Boot Data JPA -->
30.         <dependency>
31.             <groupId>org.springframework.boot</groupId>
32.             <artifactId>spring-boot-starter-data-jpa</artifactId>
33.         </dependency>
34.         
35.         <!-- H2 Database -->
36.         <dependency>
37.             <groupId>com.h2database</groupId>
38.             <artifactId>h2</artifactId>
39.             <scope>runtime</scope>
40.         </dependency>
41.         
42.         <!-- Lombok -->
43.         <dependency>
44.             <groupId>org.projectlombok</groupId>
45.             <artifactId>lombok</artifactId>
46.             <optional>true</optional>
47.         </dependency>
48.         
49.         <!-- Spring Boot Test -->
50.         <dependency>
51.             <groupId>org.springframework.boot</groupId>
52.             <artifactId>spring-boot-starter-test</artifactId>
53.             <scope>test</scope>
54.         </dependency>
55.     </dependencies>
56.    
57.     <build>
58.         <plugins>
59.             <plugin>
60.                 <groupId>org.springframework.boot</groupId>
61.                 <artifactId>spring-boot-maven-plugin</artifactId>
62.                 <configuration>
63.                     <excludes>
64.                         <exclude>
65.                             <groupId>org.projectlombok</groupId>
66.                             <artifactId>lombok</artifactId>
67.                         </exclude>
68.                     </excludes>
69.                 </configuration>
70.             </plugin>
71.         </plugins>
72.     </build>
73. </project>

复制代码

2.3 项目结构

创建一个标准的Maven项目结构，如下所示：

2. highcharts-spring-boot-demo/
3. ├── src/
4. │   ├── main/
5. │   │   ├── java/
6. │   │   │   └── com/
7. │   │   │       └── example/
8. │   │   │           └── highchartsspringbootdemo/
9. │   │   │               ├── controller/
10. │   │   │               ├── model/
11. │   │   │               ├── repository/
12. │   │   │               ├── service/
13. │   │   │               └── HighchartsSpringBootDemoApplication.java
14. │   │   └── resources/
15. │   │       ├── static/
16. │   │       │   ├── css/
17. │   │       │   ├── js/
18. │   │       │   └── index.html
19. │   │       ├── templates/
20. │   │       └── application.properties
21. │   └── test/
22. │       └── java/
23. │           └── com/
24. │               └── example/
25. │                   └── highchartsspringbootdemo/
26. └── pom.xml

复制代码

2.4 配置application.properties

在src/main/resources/application.properties文件中添加基本配置：

2. # Server Configuration
3. server.port=8080
5. # H2 Database Configuration
6. spring.h2.console.enabled=true
7. spring.h2.console.path=/h2-console
8. spring.datasource.url=jdbc:h2:mem:testdb
9. spring.datasource.driverClassName=org.h2.Driver
10. spring.datasource.username=sa
11. spring.datasource.password=password
13. # JPA Configuration
14. spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
15. spring.jpa.hibernate.ddl-auto=update
16. spring.jpa.show-sql=true

复制代码

3. 后端实现（Spring Boot部分）

3.1 创建数据模型

首先，我们需要创建一个数据模型来表示我们的业务数据。假设我们要展示销售数据，可以创建一个SalesData类：

2. package com.example.highchartsspringbootdemo.model;
4. import lombok.Data;
5. import javax.persistence.*;
6. import java.time.LocalDate;
8. @Data
9. @Entity
10. @Table(name = "sales_data")
11. public class SalesData {
12.     @Id
13.     @GeneratedValue(strategy = GenerationType.IDENTITY)
14.     private Long id;
15.    
16.     @Column(nullable = false)
17.     private LocalDate date;
18.    
19.     @Column(nullable = false)
20.     private Double amount;
21.    
22.     @Column(nullable = false)
23.     private String product;
24.    
25.     @Column(nullable = false)
26.     private String region;
27.    
28.     public SalesData() {
29.     }
30.    
31.     public SalesData(LocalDate date, Double amount, String product, String region) {
32.         this.date = date;
33.         this.amount = amount;
34.         this.product = product;
35.         this.region = region;
36.     }
37. }

复制代码

3.2 创建数据仓库

接下来，创建一个Spring Data JPA仓库接口来处理数据访问：

2. package com.example.highchartsspringbootdemo.repository;
4. import com.example.highchartsspringbootdemo.model.SalesData;
5. import org.springframework.data.jpa.repository.JpaRepository;
6. import org.springframework.data.jpa.repository.Query;
7. import org.springframework.stereotype.Repository;
9. import java.time.LocalDate;
10. import java.util.List;
12. @Repository
13. public interface SalesDataRepository extends JpaRepository<SalesData, Long> {
14.    
15.     // 查找指定日期范围内的销售数据
16.     List<SalesData> findByDateBetween(LocalDate startDate, LocalDate endDate);
17.    
18.     // 按产品分组查询销售总额
19.     @Query("SELECT new com.example.highchartsspringbootdemo.model.ProductSalesSum(s.product, SUM(s.amount)) " +
20.            "FROM SalesData s WHERE s.date BETWEEN :startDate AND :endDate GROUP BY s.product")
21.     List<ProductSalesSum> sumSalesByProductBetweenDates(LocalDate startDate, LocalDate endDate);
22.    
23.     // 按地区分组查询销售总额
24.     @Query("SELECT new com.example.highchartsspringbootdemo.model.RegionSalesSum(s.region, SUM(s.amount)) " +
25.            "FROM SalesData s WHERE s.date BETWEEN :startDate AND :endDate GROUP BY s.region")
26.     List<RegionSalesSum> sumSalesByRegionBetweenDates(LocalDate startDate, LocalDate endDate);
27. }

复制代码

为了支持上述查询中的自定义返回类型，我们需要创建两个简单的类：

2. package com.example.highchartsspringbootdemo.model;
4. import lombok.AllArgsConstructor;
5. import lombok.Data;
6. import lombok.NoArgsConstructor;
8. @Data
9. @NoArgsConstructor
10. @AllArgsConstructor
11. public class ProductSalesSum {
12.     private String product;
13.     private Double totalAmount;
14. }
16. package com.example.highchartsspringbootdemo.model;
18. import lombok.AllArgsConstructor;
19. import lombok.Data;
20. import lombok.NoArgsConstructor;
22. @Data
23. @NoArgsConstructor
24. @AllArgsConstructor
25. public class RegionSalesSum {
26.     private String region;
27.     private Double totalAmount;
28. }

复制代码

3.3 创建服务层

创建一个服务类来处理业务逻辑：

2. package com.example.highchartsspringbootdemo.service;
4. import com.example.highchartsspringbootdemo.model.ProductSalesSum;
5. import com.example.highchartsspringbootdemo.model.RegionSalesSum;
6. import com.example.highchartsspringbootdemo.model.SalesData;
7. import com.example.highchartsspringbootdemo.repository.SalesDataRepository;
8. import org.springframework.beans.factory.annotation.Autowired;
9. import org.springframework.stereotype.Service;
11. import java.time.LocalDate;
12. import java.util.List;
13. import java.util.Random;
15. @Service
16. public class SalesDataService {
17.    
18.     private final SalesDataRepository salesDataRepository;
19.    
20.     @Autowired
21.     public SalesDataService(SalesDataRepository salesDataRepository) {
22.         this.salesDataRepository = salesDataRepository;
23.     }
24.    
25.     // 获取所有销售数据
26.     public List<SalesData> getAllSalesData() {
27.         return salesDataRepository.findAll();
28.     }
29.    
30.     // 获取指定日期范围内的销售数据
31.     public List<SalesData> getSalesDataBetweenDates(LocalDate startDate, LocalDate endDate) {
32.         return salesDataRepository.findByDateBetween(startDate, endDate);
33.     }
34.    
35.     // 按产品获取销售总额
36.     public List<ProductSalesSum> getSalesSumByProduct(LocalDate startDate, LocalDate endDate) {
37.         return salesDataRepository.sumSalesByProductBetweenDates(startDate, endDate);
38.     }
39.    
40.     // 按地区获取销售总额
41.     public List<RegionSalesSum> getSalesSumByRegion(LocalDate startDate, LocalDate endDate) {
42.         return salesDataRepository.sumSalesByRegionBetweenDates(startDate, endDate);
43.     }
44.    
45.     // 生成模拟数据
46.     public void generateSampleData() {
47.         String[] products = {"Laptop", "Smartphone", "Tablet", "Monitor", "Keyboard"};
48.         String[] regions = {"North", "South", "East", "West", "Central"};
49.         Random random = new Random();
50.         
51.         // 生成过去30天的数据
52.         for (int i = 0; i < 30; i++) {
53.             LocalDate date = LocalDate.now().minusDays(i);
54.             
55.             // 每天生成5-10条销售记录
56.             int recordsPerDay = 5 + random.nextInt(6);
57.             for (int j = 0; j < recordsPerDay; j++) {
58.                 String product = products[random.nextInt(products.length)];
59.                 String region = regions[random.nextInt(regions.length)];
60.                 double amount = 100 + random.nextDouble() * 1000; // 100-1100之间的金额
61.                
62.                 SalesData salesData = new SalesData(date, amount, product, region);
63.                 salesDataRepository.save(salesData);
64.             }
65.         }
66.     }
67. }

复制代码

3.4 创建控制器

创建一个REST控制器来处理HTTP请求：

2. package com.example.highchartsspringbootdemo.controller;
4. import com.example.highchartsspringbootdemo.model.ProductSalesSum;
5. import com.example.highchartsspringbootdemo.model.RegionSalesSum;
6. import com.example.highchartsspringbootdemo.model.SalesData;
7. import com.example.highchartsspringbootdemo.service.SalesDataService;
8. import org.springframework.beans.factory.annotation.Autowired;
9. import org.springframework.format.annotation.DateTimeFormat;
10. import org.springframework.http.ResponseEntity;
11. import org.springframework.web.bind.annotation.*;
13. import java.time.LocalDate;
14. import java.util.List;
16. @RestController
17. @RequestMapping("/api/sales")
18. @CrossOrigin(origins = "*") // 允许跨域请求
19. public class SalesDataController {
20.    
21.     private final SalesDataService salesDataService;
22.    
23.     @Autowired
24.     public SalesDataController(SalesDataService salesDataService) {
25.         this.salesDataService = salesDataService;
26.     }
27.    
28.     // 获取所有销售数据
29.     @GetMapping("/all")
30.     public ResponseEntity<List<SalesData>> getAllSalesData() {
31.         List<SalesData> salesData = salesDataService.getAllSalesData();
32.         return ResponseEntity.ok(salesData);
33.     }
34.    
35.     // 获取指定日期范围内的销售数据
36.     @GetMapping("/range")
37.     public ResponseEntity<List<SalesData>> getSalesDataBetweenDates(
38.             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate startDate,
39.             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate endDate) {
40.         List<SalesData> salesData = salesDataService.getSalesDataBetweenDates(startDate, endDate);
41.         return ResponseEntity.ok(salesData);
42.     }
43.    
44.     // 按产品获取销售总额
45.     @GetMapping("/by-product")
46.     public ResponseEntity<List<ProductSalesSum>> getSalesSumByProduct(
47.             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate startDate,
48.             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate endDate) {
49.         List<ProductSalesSum> productSalesSums = salesDataService.getSalesSumByProduct(startDate, endDate);
50.         return ResponseEntity.ok(productSalesSums);
51.     }
52.    
53.     // 按地区获取销售总额
54.     @GetMapping("/by-region")
55.     public ResponseEntity<List<RegionSalesSum>> getSalesSumByRegion(
56.             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate startDate,
57.             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate endDate) {
58.         List<RegionSalesSum> regionSalesSums = salesDataService.getSalesSumByRegion(startDate, endDate);
59.         return ResponseEntity.ok(regionSalesSums);
60.     }
61.    
62.     // 生成模拟数据
63.     @PostMapping("/generate-sample-data")
64.     public ResponseEntity<String> generateSampleData() {
65.         salesDataService.generateSampleData();
66.         return ResponseEntity.ok("Sample data generated successfully");
67.     }
68. }

复制代码

3.5 初始化数据

创建一个数据初始化类，在应用启动时生成一些模拟数据：

2. package com.example.highchartsspringbootdemo;
4. import com.example.highchartsspringbootdemo.service.SalesDataService;
5. import org.springframework.boot.CommandLineRunner;
6. import org.springframework.stereotype.Component;
8. @Component
9. public class DataInitializer implements CommandLineRunner {
10.    
11.     private final SalesDataService salesDataService;
12.    
13.     public DataInitializer(SalesDataService salesDataService) {
14.         this.salesDataService = salesDataService;
15.     }
16.    
17.     @Override
18.     public void run(String... args) throws Exception {
19.         // 检查数据库是否为空，如果为空则生成模拟数据
20.         if (salesDataService.getAllSalesData().isEmpty()) {
21.             salesDataService.generateSampleData();
22.             System.out.println("Sample data has been generated.");
23.         }
24.     }
25. }

复制代码

4. 前端实现（Highcharts集成）

4.1 创建HTML页面

在src/main/resources/static目录下创建index.html文件：

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Sales Data Visualization</title>
8.    
9.     <!-- Bootstrap CSS -->
10.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
11.    
12.     <!-- Highcharts CSS -->
13.     <link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">
14.    
15.     <!-- Custom CSS -->
16.     <link rel="stylesheet" href="/css/style.css">
17. </head>
18. <body>
19.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
20.         <div class="container">
21.             <a class="navbar-brand" href="#">Sales Dashboard</a>
22.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
23.                 <span class="navbar-toggler-icon"></span>
24.             </button>
25.             <div class="collapse navbar-collapse" id="navbarNav">
26.                 <ul class="navbar-nav">
27.                     <li class="nav-item">
28.                         <a class="nav-link active" href="#" id="daily-sales-tab">Daily Sales</a>
29.                     </li>
30.                     <li class="nav-item">
31.                         <a class="nav-link" href="#" id="product-sales-tab">Sales by Product</a>
32.                     </li>
33.                     <li class="nav-item">
34.                         <a class="nav-link" href="#" id="region-sales-tab">Sales by Region</a>
35.                     </li>
36.                 </ul>
37.             </div>
38.         </div>
39.     </nav>
41.     <div class="container mt-4">
42.         <div class="row mb-4">
43.             <div class="col-md-12">
44.                 <div class="card">
45.                     <div class="card-header">
46.                         <h5 class="card-title">Date Range Selection</h5>
47.                     </div>
48.                     <div class="card-body">
49.                         <div class="row">
50.                             <div class="col-md-4">
51.                                 <label for="start-date" class="form-label">Start Date</label>
52.                                 <input type="date" class="form-control" id="start-date">
53.                             </div>
54.                             <div class="col-md-4">
55.                                 <label for="end-date" class="form-label">End Date</label>
56.                                 <input type="date" class="form-control" id="end-date">
57.                             </div>
58.                             <div class="col-md-4 d-flex align-items-end">
59.                                 <button id="update-charts" class="btn btn-primary w-100">Update Charts</button>
60.                             </div>
61.                         </div>
62.                     </div>
63.                 </div>
64.             </div>
65.         </div>
67.         <div class="row">
68.             <div class="col-md-12">
69.                 <div class="card">
70.                     <div class="card-header">
71.                         <h5 class="card-title" id="chart-title">Daily Sales Trend</h5>
72.                     </div>
73.                     <div class="card-body">
74.                         <div id="sales-chart" style="height: 400px;"></div>
75.                     </div>
76.                 </div>
77.             </div>
78.         </div>
79.     </div>
81.     <!-- Bootstrap JS -->
82.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
83.    
84.     <!-- Highcharts JS -->
85.     <script src="https://code.highcharts.com/highcharts.js"></script>
86.     <script src="https://code.highcharts.com/modules/exporting.js"></script>
87.     <script src="https://code.highcharts.com/modules/export-data.js"></script>
88.    
89.     <!-- Custom JS -->
90.     <script src="/js/app.js"></script>
91. </body>
92. </html>

复制代码

4.2 创建CSS文件

在src/main/resources/static/css目录下创建style.css文件：

2. body {
3.     background-color: #f8f9fa;
4.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5. }
7. .navbar-brand {
8.     font-weight: bold;
9. }
11. .card {
12.     border: none;
13.     border-radius: 10px;
14.     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
15.     margin-bottom: 1.5rem;
16. }
18. .card-header {
19.     background-color: #fff;
20.     border-bottom: 1px solid rgba(0, 0, 0, 0.125);
21.     border-radius: 10px 10px 0 0 !important;
22. }
24. .card-title {
25.     margin-bottom: 0;
26.     color: #495057;
27.     font-weight: 600;
28. }
30. .btn-primary {
31.     background-color: #0d6efd;
32.     border-color: #0d6efd;
33. }
35. .btn-primary:hover {
36.     background-color: #0b5ed7;
37.     border-color: #0a58ca;
38. }
40. .nav-link.active {
41.     color: #fff !important;
42.     background-color: #0d6efd;
43.     border-radius: 0.25rem;
44. }
46. .highcharts-container {
47.     width: 100%;
48.     height: 100%;
49. }
51. .highcharts-title {
52.     font-weight: 600 !important;
53. }
55. .highcharts-axis-title {
56.     font-weight: 500 !important;
57. }
59. .highcharts-legend-item {
60.     font-weight: 500 !important;
61. }

复制代码

4.3 创建JavaScript文件

在src/main/resources/static/js目录下创建app.js文件：

2. document.addEventListener('DOMContentLoaded', function() {
3.     // 设置默认日期范围（过去30天）
4.     const endDate = new Date();
5.     const startDate = new Date();
6.     startDate.setDate(endDate.getDate() - 30);
7.    
8.     // 格式化日期为YYYY-MM-DD
9.     function formatDate(date) {
10.         const year = date.getFullYear();
11.         const month = String(date.getMonth() + 1).padStart(2, '0');
12.         const day = String(date.getDate()).padStart(2, '0');
13.         return `${year}-${month}-${day}`;
14.     }
15.    
16.     // 设置日期输入框的默认值
17.     document.getElementById('start-date').value = formatDate(startDate);
18.     document.getElementById('end-date').value = formatDate(endDate);
19.    
20.     // 当前图表类型
21.     let currentChartType = 'daily-sales';
22.    
23.     // 初始化图表
24.     let salesChart = Highcharts.chart('sales-chart', {
25.         chart: {
26.             type: 'line',
27.             zoomType: 'x'
28.         },
29.         title: {
30.             text: 'Daily Sales Trend'
31.         },
32.         xAxis: {
33.             type: 'category',
34.             title: {
35.                 text: 'Date'
36.             }
37.         },
38.         yAxis: {
39.             title: {
40.                 text: 'Sales Amount ($)'
41.             }
42.         },
43.         legend: {
44.             enabled: true
45.         },
46.         plotOptions: {
47.             line: {
48.                 dataLabels: {
49.                     enabled: false
50.                 },
51.                 enableMouseTracking: true
52.             }
53.         },
54.         series: []
55.     });
56.    
57.     // 加载数据的函数
58.     async function loadData(chartType, startDate, endDate) {
59.         try {
60.             let url;
61.             let chartConfig;
62.             
63.             switch (chartType) {
64.                 case 'daily-sales':
65.                     url = `/api/sales/range?startDate=${startDate}&endDate=${endDate}`;
66.                     chartConfig = configureDailySalesChart;
67.                     break;
68.                 case 'product-sales':
69.                     url = `/api/sales/by-product?startDate=${startDate}&endDate=${endDate}`;
70.                     chartConfig = configureProductSalesChart;
71.                     break;
72.                 case 'region-sales':
73.                     url = `/api/sales/by-region?startDate=${startDate}&endDate=${endDate}`;
74.                     chartConfig = configureRegionSalesChart;
75.                     break;
76.                 default:
77.                     throw new Error('Unknown chart type');
78.             }
79.             
80.             const response = await fetch(url);
81.             if (!response.ok) {
82.                 throw new Error('Network response was not ok');
83.             }
84.             
85.             const data = await response.json();
86.             chartConfig(data);
87.         } catch (error) {
88.             console.error('Error loading data:', error);
89.             showError('Failed to load data. Please try again later.');
90.         }
91.     }
92.    
93.     // 配置每日销售图表
94.     function configureDailySalesChart(data) {
95.         // 按日期分组数据
96.         const groupedData = {};
97.         data.forEach(item => {
98.             const date = item.date;
99.             if (!groupedData[date]) {
100.                 groupedData[date] = 0;
101.             }
102.             groupedData[date] += item.amount;
103.         });
104.         
105.         // 转换为Highcharts格式
106.         const chartData = Object.keys(groupedData).map(date => {
107.             return [date, groupedData[date]];
108.         });
109.         
110.         // 更新图表
111.         salesChart.update({
112.             title: {
113.                 text: 'Daily Sales Trend'
114.             },
115.             xAxis: {
116.                 type: 'category',
117.                 title: {
118.                     text: 'Date'
119.                 }
120.             },
121.             yAxis: {
122.                 title: {
123.                     text: 'Sales Amount ($)'
124.                 }
125.             },
126.             series: [{
127.                 name: 'Daily Sales',
128.                 data: chartData,
129.                 color: '#0d6efd'
130.             }]
131.         });
132.     }
133.    
134.     // 配置产品销售图表
135.     function configureProductSalesChart(data) {
136.         // 转换为Highcharts格式
137.         const chartData = data.map(item => {
138.             return [item.product, item.totalAmount];
139.         });
140.         
141.         // 更新图表
142.         salesChart.update({
143.             chart: {
144.                 type: 'column'
145.             },
146.             title: {
147.                 text: 'Sales by Product'
148.             },
149.             xAxis: {
150.                 type: 'category',
151.                 title: {
152.                     text: 'Product'
153.                 }
154.             },
155.             yAxis: {
156.                 title: {
157.                     text: 'Sales Amount ($)'
158.                 }
159.             },
160.             series: [{
161.                 name: 'Product Sales',
162.                 data: chartData,
163.                 color: '#198754'
164.             }]
165.         });
166.     }
167.    
168.     // 配置地区销售图表
169.     function configureRegionSalesChart(data) {
170.         // 转换为Highcharts格式
171.         const chartData = data.map(item => {
172.             return [item.region, item.totalAmount];
173.         });
174.         
175.         // 更新图表
176.         salesChart.update({
177.             chart: {
178.                 type: 'pie'
179.             },
180.             title: {
181.                 text: 'Sales by Region'
182.             },
183.             xAxis: {
184.                 title: {
185.                     text: ''
186.                 }
187.             },
188.             yAxis: {
189.                 title: {
190.                     text: ''
191.                 }
192.             },
193.             plotOptions: {
194.                 pie: {
195.                     allowPointSelect: true,
196.                     cursor: 'pointer',
197.                     dataLabels: {
198.                         enabled: true,
199.                         format: '<b>{point.name}</b>: ${point.y:.2f}'
200.                     }
201.                 }
202.             },
203.             series: [{
204.                 name: 'Region Sales',
205.                 data: chartData
206.             }]
207.         });
208.     }
209.    
210.     // 显示错误信息
211.     function showError(message) {
212.         const alertDiv = document.createElement('div');
213.         alertDiv.className = 'alert alert-danger alert-dismissible fade show';
214.         alertDiv.innerHTML = `
215.             ${message}
216.             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
217.         `;
218.         
219.         const container = document.querySelector('.container');
220.         container.insertBefore(alertDiv, container.firstChild);
221.         
222.         // 3秒后自动关闭
223.         setTimeout(() => {
224.             alertDiv.classList.remove('show');
225.             setTimeout(() => {
226.                 alertDiv.remove();
227.             }, 150);
228.         }, 3000);
229.     }
230.    
231.     // 初始加载数据
232.     loadData(currentChartType, formatDate(startDate), formatDate(endDate));
233.    
234.     // 更新图表按钮点击事件
235.     document.getElementById('update-charts').addEventListener('click', function() {
236.         const startDate = document.getElementById('start-date').value;
237.         const endDate = document.getElementById('end-date').value;
238.         
239.         if (!startDate || !endDate) {
240.             showError('Please select both start and end dates.');
241.             return;
242.         }
243.         
244.         if (new Date(startDate) > new Date(endDate)) {
245.             showError('Start date must be before end date.');
246.             return;
247.         }
248.         
249.         loadData(currentChartType, startDate, endDate);
250.     });
251.    
252.     // 标签页切换事件
253.     document.getElementById('daily-sales-tab').addEventListener('click', function(e) {
254.         e.preventDefault();
255.         currentChartType = 'daily-sales';
256.         document.querySelectorAll('.nav-link').forEach(link => {
257.             link.classList.remove('active');
258.         });
259.         this.classList.add('active');
260.         
261.         const startDate = document.getElementById('start-date').value;
262.         const endDate = document.getElementById('end-date').value;
263.         loadData(currentChartType, startDate, endDate);
264.     });
265.    
266.     document.getElementById('product-sales-tab').addEventListener('click', function(e) {
267.         e.preventDefault();
268.         currentChartType = 'product-sales';
269.         document.querySelectorAll('.nav-link').forEach(link => {
270.             link.classList.remove('active');
271.         });
272.         this.classList.add('active');
273.         
274.         const startDate = document.getElementById('start-date').value;
275.         const endDate = document.getElementById('end-date').value;
276.         loadData(currentChartType, startDate, endDate);
277.     });
278.    
279.     document.getElementById('region-sales-tab').addEventListener('click', function(e) {
280.         e.preventDefault();
281.         currentChartType = 'region-sales';
282.         document.querySelectorAll('.nav-link').forEach(link => {
283.             link.classList.remove('active');
284.         });
285.         this.classList.add('active');
286.         
287.         const startDate = document.getElementById('start-date').value;
288.         const endDate = document.getElementById('end-date').value;
289.         loadData(currentChartType, startDate, endDate);
290.     });
291. });

复制代码

5. 数据交互和动态更新

5.1 实现实时数据更新

为了实现实时数据更新，我们可以使用WebSocket技术。首先，添加WebSocket依赖到pom.xml：

2. <!-- WebSocket -->
3. <dependency>
4.     <groupId>org.springframework.boot</groupId>
5.     <artifactId>spring-boot-starter-websocket</artifactId>
6. </dependency>

复制代码

5.2 配置WebSocket

创建一个WebSocket配置类：

2. package com.example.highchartsspringbootdemo.config;
4. import org.springframework.context.annotation.Configuration;
5. import org.springframework.messaging.simp.config.MessageBrokerRegistry;
6. import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
7. import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
8. import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
10. @Configuration
11. @EnableWebSocketMessageBroker
12. public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
13.    
14.     @Override
15.     public void configureMessageBroker(MessageBrokerRegistry config) {
16.         config.enableSimpleBroker("/topic");
17.         config.setApplicationDestinationPrefixes("/app");
18.     }
19.    
20.     @Override
21.     public void registerStompEndpoints(StompEndpointRegistry registry) {
22.         registry.addEndpoint("/ws").withSockJS();
23.     }
24. }

复制代码

5.3 创建实时数据控制器

创建一个控制器来处理实时数据推送：

2. package com.example.highchartsspringbootdemo.controller;
4. import com.example.highchartsspringbootdemo.model.SalesData;
5. import com.example.highchartsspringbootdemo.service.SalesDataService;
6. import org.springframework.beans.factory.annotation.Autowired;
7. import org.springframework.messaging.handler.annotation.MessageMapping;
8. import org.springframework.messaging.handler.annotation.SendTo;
9. import org.springframework.stereotype.Controller;
10. import org.springframework.web.bind.annotation.GetMapping;
11. import org.springframework.web.bind.annotation.ResponseBody;
13. import java.time.LocalDate;
14. import java.util.List;
15. import java.util.Random;
16. import java.util.concurrent.Executors;
17. import java.util.concurrent.ScheduledExecutorService;
18. import java.util.concurrent.TimeUnit;
20. @Controller
21. public class RealTimeDataController {
22.    
23.     private final SalesDataService salesDataService;
24.     private final ScheduledExecutorService scheduler = Executors.newScheduledThreadPool(1);
25.    
26.     @Autowired
27.     public RealTimeDataController(SalesDataService salesDataService) {
28.         this.salesDataService = salesDataService;
29.         startRealTimeDataGeneration();
30.     }
31.    
32.     // 开始实时生成数据
33.     private void startRealTimeDataGeneration() {
34.         scheduler.scheduleAtFixedRate(() -> {
35.             // 生成新的销售数据
36.             String[] products = {"Laptop", "Smartphone", "Tablet", "Monitor", "Keyboard"};
37.             String[] regions = {"North", "South", "East", "West", "Central"};
38.             Random random = new Random();
39.             
40.             String product = products[random.nextInt(products.length)];
41.             String region = regions[random.nextInt(regions.length)];
42.             double amount = 100 + random.nextDouble() * 1000;
43.             
44.             SalesData newSalesData = new SalesData(LocalDate.now(), amount, product, region);
45.             salesDataService.save(newSalesData);
46.             
47.             // 推送到前端
48.             broadcastNewSalesData(newSalesData);
49.         }, 10, 10, TimeUnit.SECONDS); // 每10秒生成一次新数据
50.     }
51.    
52.     // 广播新销售数据
53.     private void broadcastNewSalesData(SalesData salesData) {
54.         // 这里可以通过WebSocket将新数据推送到前端
55.         // 实际实现取决于你的WebSocket配置
56.     }
57.    
58.     // 获取今天的销售数据
59.     @GetMapping("/api/sales/today")
60.     @ResponseBody
61.     public List<SalesData> getTodaySalesData() {
62.         LocalDate today = LocalDate.now();
63.         return salesDataService.getSalesDataBetweenDates(today, today);
64.     }
65.    
66.     // 处理WebSocket消息
67.     @MessageMapping("/hello")
68.     @SendTo("/topic/greetings")
69.     public String greeting(String message) throws Exception {
70.         return "Hello, " + message + "!";
71.     }
72. }

复制代码

5.4 更新前端以支持实时数据

在app.js中添加WebSocket支持：

2. // 在文件顶部添加WebSocket连接
3. let stompClient = null;
5. function connect() {
6.     const socket = new SockJS('/ws');
7.     stompClient = Stomp.over(socket);
8.     stompClient.connect({}, function(frame) {
9.         console.log('Connected: ' + frame);
10.         stompClient.subscribe('/topic/sales', function(message) {
11.             const salesData = JSON.parse(message.body);
12.             updateChartWithNewData(salesData);
13.         });
14.     }, function(error) {
15.         console.log('Error: ' + error);
16.         // 5秒后尝试重新连接
17.         setTimeout(connect, 5000);
18.     });
19. }
21. // 断开连接
22. function disconnect() {
23.     if (stompClient !== null) {
24.         stompClient.disconnect();
25.     }
26.     console.log("Disconnected");
27. }
29. // 更新图表数据
30. function updateChartWithNewData(newData) {
31.     // 根据当前图表类型更新数据
32.     if (currentChartType === 'daily-sales') {
33.         // 检查是否已有该日期的数据点
34.         const date = newData.date;
35.         let found = false;
36.         
37.         salesChart.series[0].points.forEach(point => {
38.             if (point.category === date) {
39.                 point.update(point.y + newData.amount);
40.                 found = true;
41.             }
42.         });
43.         
44.         // 如果没有找到该日期的数据点，添加新的
45.         if (!found) {
46.             salesChart.series[0].addPoint([date, newData.amount]);
47.         }
48.     } else if (currentChartType === 'product-sales') {
49.         // 查找并更新产品数据
50.         const product = newData.product;
51.         let found = false;
52.         
53.         salesChart.series[0].points.forEach(point => {
54.             if (point.category === product) {
55.                 point.update(point.y + newData.amount);
56.                 found = true;
57.             }
58.         });
59.         
60.         // 如果没有找到该产品的数据点，添加新的
61.         if (!found) {
62.             // 重新加载整个图表数据
63.             const startDate = document.getElementById('start-date').value;
64.             const endDate = document.getElementById('end-date').value;
65.             loadData(currentChartType, startDate, endDate);
66.         }
67.     } else if (currentChartType === 'region-sales') {
68.         // 重新加载整个图表数据
69.         const startDate = document.getElementById('start-date').value;
70.         const endDate = document.getElementById('end-date').value;
71.         loadData(currentChartType, startDate, endDate);
72.     }
73. }
75. // 在页面加载时连接WebSocket
76. window.addEventListener('load', function() {
77.     connect();
78. });
80. // 在页面关闭时断开连接
81. window.addEventListener('beforeunload', function() {
82.     disconnect();
83. });

复制代码

6. 实际案例和最佳实践

6.1 案例一：销售仪表板

我们已经实现了一个销售仪表板，它可以展示每日销售趋势、按产品分类的销售数据和按地区分类的销售数据。这个仪表板具有以下特点：

• 交互式图表：用户可以与图表交互，如缩放、悬停查看详细数据等
• 日期范围选择：用户可以选择特定日期范围查看数据
• 实时更新：图表可以实时更新以反映新数据
• 响应式设计：仪表板适应不同屏幕尺寸

6.2 案例二：系统性能监控

让我们创建一个系统性能监控的例子，展示如何使用Highcharts和Spring Boot来监控系统性能。

首先，创建一个系统性能数据模型：

2. package com.example.highchartsspringbootdemo.model;
4. import lombok.Data;
5. import javax.persistence.*;
6. import java.time.LocalDateTime;
8. @Data
9. @Entity
10. @Table(name = "system_performance")
11. public class SystemPerformance {
12.     @Id
13.     @GeneratedValue(strategy = GenerationType.IDENTITY)
14.     private Long id;
15.    
16.     @Column(nullable = false)
17.     private LocalDateTime timestamp;
18.    
19.     @Column(nullable = false)
20.     private Double cpuUsage;
21.    
22.     @Column(nullable = false)
23.     private Double memoryUsage;
24.    
25.     @Column(nullable = false)
26.     private Double diskUsage;
27.    
28.     @Column(nullable = false)
29.     private Double networkIn;
30.    
31.     @Column(nullable = false)
32.     private Double networkOut;
33.    
34.     public SystemPerformance() {
35.     }
36.    
37.     public SystemPerformance(LocalDateTime timestamp, Double cpuUsage, Double memoryUsage,
38.                             Double diskUsage, Double networkIn, Double networkOut) {
39.         this.timestamp = timestamp;
40.         this.cpuUsage = cpuUsage;
41.         this.memoryUsage = memoryUsage;
42.         this.diskUsage = diskUsage;
43.         this.networkIn = networkIn;
44.         this.networkOut = networkOut;
45.     }
46. }

复制代码

然后，创建一个仓库接口：

2. package com.example.highchartsspringbootdemo.repository;
4. import com.example.highchartsspringbootdemo.model.SystemPerformance;
5. import org.springframework.data.jpa.repository.JpaRepository;
6. import org.springframework.stereotype.Repository;
8. import java.time.LocalDateTime;
9. import java.util.List;
11. @Repository
12. public interface SystemPerformanceRepository extends JpaRepository<SystemPerformance, Long> {
13.    
14.     // 查找指定时间范围内的性能数据
15.     List<SystemPerformance> findByTimestampBetweenOrderByTimestamp(LocalDateTime startTime, LocalDateTime endTime);
16. }

复制代码

创建一个服务类：

2. package com.example.highchartsspringbootdemo.service;
4. import com.example.highchartsspringbootdemo.model.SystemPerformance;
5. import com.example.highchartsspringbootdemo.repository.SystemPerformanceRepository;
6. import org.springframework.beans.factory.annotation.Autowired;
7. import org.springframework.stereotype.Service;
9. import java.lang.management.ManagementFactory;
10. import java.lang.management.OperatingSystemMXBean;
11. import java.time.LocalDateTime;
12. import java.util.List;
13. import java.util.Random;
15. @Service
16. public class SystemPerformanceService {
17.    
18.     private final SystemPerformanceRepository systemPerformanceRepository;
19.    
20.     @Autowired
21.     public SystemPerformanceService(SystemPerformanceRepository systemPerformanceRepository) {
22.         this.systemPerformanceRepository = systemPerformanceRepository;
23.     }
24.    
25.     // 获取指定时间范围内的性能数据
26.     public List<SystemPerformance> getPerformanceDataBetweenTimes(LocalDateTime startTime, LocalDateTime endTime) {
27.         return systemPerformanceRepository.findByTimestampBetweenOrderByTimestamp(startTime, endTime);
28.     }
29.    
30.     // 保存性能数据
31.     public SystemPerformance save(SystemPerformance systemPerformance) {
32.         return systemPerformanceRepository.save(systemPerformance);
33.     }
34.    
35.     // 获取当前系统性能数据
36.     public SystemPerformance getCurrentSystemPerformance() {
37.         OperatingSystemMXBean osBean = ManagementFactory.getOperatingSystemMXBean();
38.         com.sun.management.OperatingSystemMXBean sunOsBean =
39.             (com.sun.management.OperatingSystemMXBean) osBean;
40.         
41.         // 获取系统负载
42.         double cpuUsage = sunOsBean.getSystemCpuLoad() * 100;
43.         double memoryUsage = (1 - (double) sunOsBean.getFreePhysicalMemorySize() /
44.                              (double) sunOsBean.getTotalPhysicalMemorySize()) * 100;
45.         
46.         // 模拟磁盘和网络使用率
47.         Random random = new Random();
48.         double diskUsage = 30 + random.nextDouble() * 50; // 30-80%
49.         double networkIn = random.nextDouble() * 100; // 0-100 MB/s
50.         double networkOut = random.nextDouble() * 100; // 0-100 MB/s
51.         
52.         return new SystemPerformance(
53.             LocalDateTime.now(),
54.             cpuUsage,
55.             memoryUsage,
56.             diskUsage,
57.             networkIn,
58.             networkOut
59.         );
60.     }
61.    
62.     // 生成模拟性能数据
63.     public void generateSamplePerformanceData() {
64.         Random random = new Random();
65.         LocalDateTime now = LocalDateTime.now();
66.         
67.         // 生成过去24小时的数据，每5分钟一条
68.         for (int i = 288; i >= 0; i--) { // 24小时 * 12次/小时 = 288次
69.             LocalDateTime timestamp = now.minusMinutes(i * 5);
70.             
71.             double cpuUsage = Math.max(0, Math.min(100, 20 + random.nextDouble() * 60));
72.             double memoryUsage = Math.max(0, Math.min(100, 30 + random.nextDouble() * 50));
73.             double diskUsage = Math.max(0, Math.min(100, 20 + random.nextDouble() * 60));
74.             double networkIn = random.nextDouble() * 100;
75.             double networkOut = random.nextDouble() * 100;
76.             
77.             SystemPerformance performance = new SystemPerformance(
78.                 timestamp,
79.                 cpuUsage,
80.                 memoryUsage,
81.                 diskUsage,
82.                 networkIn,
83.                 networkOut
84.             );
85.             
86.             systemPerformanceRepository.save(performance);
87.         }
88.     }
89. }

复制代码

创建一个控制器：

2. package com.example.highchartsspringbootdemo.controller;
4. import com.example.highchartsspringbootdemo.model.SystemPerformance;
5. import com.example.highchartsspringbootdemo.service.SystemPerformanceService;
6. import org.springframework.beans.factory.annotation.Autowired;
7. import org.springframework.format.annotation.DateTimeFormat;
8. import org.springframework.http.ResponseEntity;
9. import org.springframework.web.bind.annotation.*;
11. import java.time.LocalDateTime;
12. import java.util.List;
14. @RestController
15. @RequestMapping("/api/performance")
16. @CrossOrigin(origins = "*")
17. public class SystemPerformanceController {
18.    
19.     private final SystemPerformanceService systemPerformanceService;
20.    
21.     @Autowired
22.     public SystemPerformanceController(SystemPerformanceService systemPerformanceService) {
23.         this.systemPerformanceService = systemPerformanceService;
24.     }
25.    
26.     // 获取指定时间范围内的性能数据
27.     @GetMapping("/range")
28.     public ResponseEntity<List<SystemPerformance>> getPerformanceDataBetweenTimes(
29.             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE_TIME) LocalDateTime startTime,
30.             @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE_TIME) LocalDateTime endTime) {
31.         List<SystemPerformance> performanceData =
32.             systemPerformanceService.getPerformanceDataBetweenTimes(startTime, endTime);
33.         return ResponseEntity.ok(performanceData);
34.     }
35.    
36.     // 获取当前系统性能
37.     @GetMapping("/current")
38.     public ResponseEntity<SystemPerformance> getCurrentSystemPerformance() {
39.         SystemPerformance currentPerformance = systemPerformanceService.getCurrentSystemPerformance();
40.         return ResponseEntity.ok(currentPerformance);
41.     }
42.    
43.     // 生成模拟性能数据
44.     @PostMapping("/generate-sample-data")
45.     public ResponseEntity<String> generateSamplePerformanceData() {
46.         systemPerformanceService.generateSamplePerformanceData();
47.         return ResponseEntity.ok("Sample performance data generated successfully");
48.     }
49. }

复制代码

创建一个性能监控的HTML页面performance.html：

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>System Performance Monitor</title>
8.    
9.     <!-- Bootstrap CSS -->
10.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
11.    
12.     <!-- Highcharts CSS -->
13.     <link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">
14.    
15.     <!-- Custom CSS -->
16.     <link rel="stylesheet" href="/css/style.css">
17. </head>
18. <body>
19.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
20.         <div class="container">
21.             <a class="navbar-brand" href="#">System Performance Monitor</a>
22.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
23.                 <span class="navbar-toggler-icon"></span>
24.             </button>
25.             <div class="collapse navbar-collapse" id="navbarNav">
26.                 <ul class="navbar-nav">
27.                     <li class="nav-item">
28.                         <a class="nav-link active" href="#" id="overview-tab">Overview</a>
29.                     </li>
30.                     <li class="nav-item">
31.                         <a class="nav-link" href="#" id="cpu-tab">CPU Usage</a>
32.                     </li>
33.                     <li class="nav-item">
34.                         <a class="nav-link" href="#" id="memory-tab">Memory Usage</a>
35.                     </li>
36.                     <li class="nav-item">
37.                         <a class="nav-link" href="#" id="disk-tab">Disk Usage</a>
38.                     </li>
39.                     <li class="nav-item">
40.                         <a class="nav-link" href="#" id="network-tab">Network</a>
41.                     </li>
42.                 </ul>
43.             </div>
44.         </div>
45.     </nav>
47.     <div class="container mt-4">
48.         <div class="row mb-4">
49.             <div class="col-md-12">
50.                 <div class="card">
51.                     <div class="card-header">
52.                         <h5 class="card-title">Time Range Selection</h5>
53.                     </div>
54.                     <div class="card-body">
55.                         <div class="row">
56.                             <div class="col-md-4">
57.                                 <label for="start-time" class="form-label">Start Time</label>
58.                                 <input type="datetime-local" class="form-control" id="start-time">
59.                             </div>
60.                             <div class="col-md-4">
61.                                 <label for="end-time" class="form-label">End Time</label>
62.                                 <input type="datetime-local" class="form-control" id="end-time">
63.                             </div>
64.                             <div class="col-md-4 d-flex align-items-end">
65.                                 <button id="update-charts" class="btn btn-primary w-100">Update Charts</button>
66.                             </div>
67.                         </div>
68.                     </div>
69.                 </div>
70.             </div>
71.         </div>
73.         <div class="row mb-4">
74.             <div class="col-md-3">
75.                 <div class="card text-white bg-primary">
76.                     <div class="card-body">
77.                         <h5 class="card-title">CPU Usage</h5>
78.                         <h2 id="cpu-usage" class="card-text">0%</h2>
79.                     </div>
80.                 </div>
81.             </div>
82.             <div class="col-md-3">
83.                 <div class="card text-white bg-success">
84.                     <div class="card-body">
85.                         <h5 class="card-title">Memory Usage</h5>
86.                         <h2 id="memory-usage" class="card-text">0%</h2>
87.                     </div>
88.                 </div>
89.             </div>
90.             <div class="col-md-3">
91.                 <div class="card text-white bg-warning">
92.                     <div class="card-body">
93.                         <h5 class="card-title">Disk Usage</h5>
94.                         <h2 id="disk-usage" class="card-text">0%</h2>
95.                     </div>
96.                 </div>
97.             </div>
98.             <div class="col-md-3">
99.                 <div class="card text-white bg-info">
100.                     <div class="card-body">
101.                         <h5 class="card-title">Network I/O</h5>
102.                         <h2 id="network-usage" class="card-text">0 MB/s</h2>
103.                     </div>
104.                 </div>
105.             </div>
106.         </div>
108.         <div class="row">
109.             <div class="col-md-12">
110.                 <div class="card">
111.                     <div class="card-header">
112.                         <h5 class="card-title" id="chart-title">System Performance Overview</h5>
113.                     </div>
114.                     <div class="card-body">
115.                         <div id="performance-chart" style="height: 400px;"></div>
116.                     </div>
117.                 </div>
118.             </div>
119.         </div>
120.     </div>
122.     <!-- Bootstrap JS -->
123.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
124.    
125.     <!-- Highcharts JS -->
126.     <script src="https://code.highcharts.com/highcharts.js"></script>
127.     <script src="https://code.highcharts.com/modules/exporting.js"></script>
128.     <script src="https://code.highcharts.com/modules/export-data.js"></script>
129.    
130.     <!-- SockJS and Stomp for WebSocket -->
131.     <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script>
132.     <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
133.    
134.     <!-- Custom JS -->
135.     <script src="/js/performance.js"></script>
136. </body>
137. </html>

复制代码

创建对应的JavaScript文件performance.js：

2. document.addEventListener('DOMContentLoaded', function() {
3.     // 设置默认时间范围（过去24小时）
4.     const endTime = new Date();
5.     const startTime = new Date();
6.     startTime.setHours(endTime.getHours() - 24);
7.    
8.     // 格式化日期时间为YYYY-MM-DDTHH:MM格式
9.     function formatDateTime(date) {
10.         const year = date.getFullYear();
11.         const month = String(date.getMonth() + 1).padStart(2, '0');
12.         const day = String(date.getDate()).padStart(2, '0');
13.         const hours = String(date.getHours()).padStart(2, '0');
14.         const minutes = String(date.getMinutes()).padStart(2, '0');
15.         return `${year}-${month}-${day}T${hours}:${minutes}`;
16.     }
17.    
18.     // 设置时间输入框的默认值
19.     document.getElementById('start-time').value = formatDateTime(startTime);
20.     document.getElementById('end-time').value = formatDateTime(endTime);
21.    
22.     // 当前图表类型
23.     let currentChartType = 'overview';
24.    
25.     // 初始化图表
26.     let performanceChart = Highcharts.chart('performance-chart', {
27.         chart: {
28.             zoomType: 'x'
29.         },
30.         title: {
31.             text: 'System Performance Overview'
32.         },
33.         xAxis: {
34.             type: 'datetime',
35.             title: {
36.                 text: 'Time'
37.             }
38.         },
39.         yAxis: {
40.             title: {
41.                 text: 'Usage (%)'
42.             },
43.             min: 0,
44.             max: 100
45.         },
46.         legend: {
47.             enabled: true
48.         },
49.         plotOptions: {
50.             line: {
51.                 dataLabels: {
52.                     enabled: false
53.                 },
54.                 enableMouseTracking: true
55.             }
56.         },
57.         series: []
58.     });
59.    
60.     // WebSocket连接
61.     let stompClient = null;
62.    
63.     function connect() {
64.         const socket = new SockJS('/ws');
65.         stompClient = Stomp.over(socket);
66.         stompClient.connect({}, function(frame) {
67.             console.log('Connected: ' + frame);
68.             stompClient.subscribe('/topic/performance', function(message) {
69.                 const performanceData = JSON.parse(message.body);
70.                 updateCurrentMetrics(performanceData);
71.                 updateChartWithNewData(performanceData);
72.             });
73.         }, function(error) {
74.             console.log('Error: ' + error);
75.             // 5秒后尝试重新连接
76.             setTimeout(connect, 5000);
77.         });
78.     }
79.    
80.     // 断开连接
81.     function disconnect() {
82.         if (stompClient !== null) {
83.             stompClient.disconnect();
84.         }
85.         console.log("Disconnected");
86.     }
87.    
88.     // 更新当前指标
89.     function updateCurrentMetrics(data) {
90.         document.getElementById('cpu-usage').textContent = data.cpuUsage.toFixed(1) + '%';
91.         document.getElementById('memory-usage').textContent = data.memoryUsage.toFixed(1) + '%';
92.         document.getElementById('disk-usage').textContent = data.diskUsage.toFixed(1) + '%';
93.         document.getElementById('network-usage').textContent =
94.             (data.networkIn + data.networkOut).toFixed(1) + ' MB/s';
95.     }
96.    
97.     // 加载数据的函数
98.     async function loadPerformanceData(chartType, startTime, endTime) {
99.         try {
100.             const startTimeISO = new Date(startTime).toISOString();
101.             const endTimeISO = new Date(endTime).toISOString();
102.             
103.             const response = await fetch(`/api/performance/range?startTime=${startTimeISO}&endTime=${endTimeISO}`);
104.             if (!response.ok) {
105.                 throw new Error('Network response was not ok');
106.             }
107.             
108.             const data = await response.json();
109.             configureChart(chartType, data);
110.         } catch (error) {
111.             console.error('Error loading performance data:', error);
112.             showError('Failed to load performance data. Please try again later.');
113.         }
114.     }
115.    
116.     // 配置图表
117.     function configureChart(chartType, data) {
118.         // 转换时间戳为Highcharts格式
119.         const chartData = data.map(item => {
120.             return [new Date(item.timestamp).getTime(), item];
121.         });
122.         
123.         switch (chartType) {
124.             case 'overview':
125.                 performanceChart.update({
126.                     title: {
127.                         text: 'System Performance Overview'
128.                     },
129.                     yAxis: {
130.                         title: {
131.                             text: 'Usage (%)'
132.                         },
133.                         min: 0,
134.                         max: 100
135.                     },
136.                     series: [
137.                         {
138.                             name: 'CPU Usage',
139.                             data: chartData.map(item => [item[0], item[1].cpuUsage]),
140.                             color: '#0d6efd'
141.                         },
142.                         {
143.                             name: 'Memory Usage',
144.                             data: chartData.map(item => [item[0], item[1].memoryUsage]),
145.                             color: '#198754'
146.                         },
147.                         {
148.                             name: 'Disk Usage',
149.                             data: chartData.map(item => [item[0], item[1].diskUsage]),
150.                             color: '#ffc107'
151.                         }
152.                     ]
153.                 });
154.                 break;
155.                
156.             case 'cpu':
157.                 performanceChart.update({
158.                     title: {
159.                         text: 'CPU Usage'
160.                     },
161.                     yAxis: {
162.                         title: {
163.                             text: 'Usage (%)'
164.                         },
165.                         min: 0,
166.                         max: 100
167.                     },
168.                     series: [
169.                         {
170.                             name: 'CPU Usage',
171.                             data: chartData.map(item => [item[0], item[1].cpuUsage]),
172.                             color: '#0d6efd'
173.                         }
174.                     ]
175.                 });
176.                 break;
177.                
178.             case 'memory':
179.                 performanceChart.update({
180.                     title: {
181.                         text: 'Memory Usage'
182.                     },
183.                     yAxis: {
184.                         title: {
185.                             text: 'Usage (%)'
186.                         },
187.                         min: 0,
188.                         max: 100
189.                     },
190.                     series: [
191.                         {
192.                             name: 'Memory Usage',
193.                             data: chartData.map(item => [item[0], item[1].memoryUsage]),
194.                             color: '#198754'
195.                         }
196.                     ]
197.                 });
198.                 break;
199.                
200.             case 'disk':
201.                 performanceChart.update({
202.                     title: {
203.                         text: 'Disk Usage'
204.                     },
205.                     yAxis: {
206.                         title: {
207.                             text: 'Usage (%)'
208.                         },
209.                         min: 0,
210.                         max: 100
211.                     },
212.                     series: [
213.                         {
214.                             name: 'Disk Usage',
215.                             data: chartData.map(item => [item[0], item[1].diskUsage]),
216.                             color: '#ffc107'
217.                         }
218.                     ]
219.                 });
220.                 break;
221.                
222.             case 'network':
223.                 performanceChart.update({
224.                     title: {
225.                         text: 'Network I/O'
226.                     },
227.                     yAxis: {
228.                         title: {
229.                             text: 'MB/s'
230.                         },
231.                         min: 0
232.                     },
233.                     series: [
234.                         {
235.                             name: 'Network In',
236.                             data: chartData.map(item => [item[0], item[1].networkIn]),
237.                             color: '#17a2b8'
238.                         },
239.                         {
240.                             name: 'Network Out',
241.                             data: chartData.map(item => [item[0], item[1].networkOut]),
242.                             color: '#6f42c1'
243.                         }
244.                     ]
245.                 });
246.                 break;
247.         }
248.     }
249.    
250.     // 更新图表数据
251.     function updateChartWithNewData(newData) {
252.         const timestamp = new Date(newData.timestamp).getTime();
253.         
254.         switch (currentChartType) {
255.             case 'overview':
256.                 // 更新CPU使用率
257.                 updateSeriesData(0, timestamp, newData.cpuUsage);
258.                 // 更新内存使用率
259.                 updateSeriesData(1, timestamp, newData.memoryUsage);
260.                 // 更新磁盘使用率
261.                 updateSeriesData(2, timestamp, newData.diskUsage);
262.                 break;
263.                
264.             case 'cpu':
265.                 // 更新CPU使用率
266.                 updateSeriesData(0, timestamp, newData.cpuUsage);
267.                 break;
268.                
269.             case 'memory':
270.                 // 更新内存使用率
271.                 updateSeriesData(0, timestamp, newData.memoryUsage);
272.                 break;
273.                
274.             case 'disk':
275.                 // 更新磁盘使用率
276.                 updateSeriesData(0, timestamp, newData.diskUsage);
277.                 break;
278.                
279.             case 'network':
280.                 // 更新网络输入
281.                 updateSeriesData(0, timestamp, newData.networkIn);
282.                 // 更新网络输出
283.                 updateSeriesData(1, timestamp, newData.networkOut);
284.                 break;
285.         }
286.     }
287.    
288.     // 更新系列数据
289.     function updateSeriesData(seriesIndex, x, y) {
290.         if (performanceChart.series[seriesIndex]) {
291.             // 添加新数据点
292.             performanceChart.series[seriesIndex].addPoint([x, y], true, false);
293.             
294.             // 限制显示的数据点数量，保持图表清晰
295.             const maxPoints = 100;
296.             if (performanceChart.series[seriesIndex].data.length > maxPoints) {
297.                 performanceChart.series[seriesIndex].data[0].remove(false);
298.             }
299.         }
300.     }
301.    
302.     // 显示错误信息
303.     function showError(message) {
304.         const alertDiv = document.createElement('div');
305.         alertDiv.className = 'alert alert-danger alert-dismissible fade show';
306.         alertDiv.innerHTML = `
307.             ${message}
308.             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
309.         `;
310.         
311.         const container = document.querySelector('.container');
312.         container.insertBefore(alertDiv, container.firstChild);
313.         
314.         // 3秒后自动关闭
315.         setTimeout(() => {
316.             alertDiv.classList.remove('show');
317.             setTimeout(() => {
318.                 alertDiv.remove();
319.             }, 150);
320.         }, 3000);
321.     }
322.    
323.     // 初始加载数据
324.     loadPerformanceData(currentChartType, formatDateTime(startTime), formatDateTime(endTime));
325.    
326.     // 更新图表按钮点击事件
327.     document.getElementById('update-charts').addEventListener('click', function() {
328.         const startTime = document.getElementById('start-time').value;
329.         const endTime = document.getElementById('end-time').value;
330.         
331.         if (!startTime || !endTime) {
332.             showError('Please select both start and end times.');
333.             return;
334.         }
335.         
336.         if (new Date(startTime) > new Date(endTime)) {
337.             showError('Start time must be before end time.');
338.             return;
339.         }
340.         
341.         loadPerformanceData(currentChartType, startTime, endTime);
342.     });
343.    
344.     // 标签页切换事件
345.     document.getElementById('overview-tab').addEventListener('click', function(e) {
346.         e.preventDefault();
347.         currentChartType = 'overview';
348.         document.querySelectorAll('.nav-link').forEach(link => {
349.             link.classList.remove('active');
350.         });
351.         this.classList.add('active');
352.         
353.         const startTime = document.getElementById('start-time').value;
354.         const endTime = document.getElementById('end-time').value;
355.         loadPerformanceData(currentChartType, startTime, endTime);
356.     });
357.    
358.     document.getElementById('cpu-tab').addEventListener('click', function(e) {
359.         e.preventDefault();
360.         currentChartType = 'cpu';
361.         document.querySelectorAll('.nav-link').forEach(link => {
362.             link.classList.remove('active');
363.         });
364.         this.classList.add('active');
365.         
366.         const startTime = document.getElementById('start-time').value;
367.         const endTime = document.getElementById('end-time').value;
368.         loadPerformanceData(currentChartType, startTime, endTime);
369.     });
370.    
371.     document.getElementById('memory-tab').addEventListener('click', function(e) {
372.         e.preventDefault();
373.         currentChartType = 'memory';
374.         document.querySelectorAll('.nav-link').forEach(link => {
375.             link.classList.remove('active');
376.         });
377.         this.classList.add('active');
378.         
379.         const startTime = document.getElementById('start-time').value;
380.         const endTime = document.getElementById('end-time').value;
381.         loadPerformanceData(currentChartType, startTime, endTime);
382.     });
383.    
384.     document.getElementById('disk-tab').addEventListener('click', function(e) {
385.         e.preventDefault();
386.         currentChartType = 'disk';
387.         document.querySelectorAll('.nav-link').forEach(link => {
388.             link.classList.remove('active');
389.         });
390.         this.classList.add('active');
391.         
392.         const startTime = document.getElementById('start-time').value;
393.         const endTime = document.getElementById('end-time').value;
394.         loadPerformanceData(currentChartType, startTime, endTime);
395.     });
396.    
397.     document.getElementById('network-tab').addEventListener('click', function(e) {
398.         e.preventDefault();
399.         currentChartType = 'network';
400.         document.querySelectorAll('.nav-link').forEach(link => {
401.             link.classList.remove('active');
402.         });
403.         this.classList.add('active');
404.         
405.         const startTime = document.getElementById('start-time').value;
406.         const endTime = document.getElementById('end-time').value;
407.         loadPerformanceData(currentChartType, startTime, endTime);
408.     });
409.    
410.     // 连接WebSocket
411.     connect();
412.    
413.     // 在页面关闭时断开连接
414.     window.addEventListener('beforeunload', function() {
415.         disconnect();
416.     });
417.    
418.     // 定期获取当前系统性能数据
419.     setInterval(async function() {
420.         try {
421.             const response = await fetch('/api/performance/current');
422.             if (!response.ok) {
423.                 throw new Error('Network response was not ok');
424.             }
425.             
426.             const data = await response.json();
427.             updateCurrentMetrics(data);
428.         } catch (error) {
429.             console.error('Error fetching current performance data:', error);
430.         }
431.     }, 5000); // 每5秒更新一次
432. });

复制代码

6.3 最佳实践

在将Highcharts与Spring Boot集成时，以下是一些最佳实践：

1. 前后端分离：保持前端和后端的清晰分离，使用RESTful API进行通信。
2. 数据格式化：在后端提供格式化良好的数据，减少前端处理负担。
3. 错误处理：实现全面的错误处理，包括网络错误、数据格式错误等。
4. 性能优化：使用分页和延迟加载处理大量数据实现数据缓存减少数据库查询使用WebSocket实现实时更新，避免轮询
5. 使用分页和延迟加载处理大量数据
6. 实现数据缓存减少数据库查询
7. 使用WebSocket实现实时更新，避免轮询
8. 安全性：实现适当的认证和授权防止SQL注入和XSS攻击使用HTTPS保护数据传输
9. 实现适当的认证和授权
10. 防止SQL注入和XSS攻击
11. 使用HTTPS保护数据传输
12. 可扩展性：设计可扩展的架构，便于添加新的图表类型使用配置而非硬编码值实现模块化设计
13. 设计可扩展的架构，便于添加新的图表类型
14. 使用配置而非硬编码值
15. 实现模块化设计
16. 用户体验：提供加载指示器实现响应式设计适应不同设备添加交互功能如缩放、悬停提示等
17. 提供加载指示器
18. 实现响应式设计适应不同设备
19. 添加交互功能如缩放、悬停提示等

前后端分离：保持前端和后端的清晰分离，使用RESTful API进行通信。

数据格式化：在后端提供格式化良好的数据，减少前端处理负担。

错误处理：实现全面的错误处理，包括网络错误、数据格式错误等。

性能优化：

• 使用分页和延迟加载处理大量数据
• 实现数据缓存减少数据库查询
• 使用WebSocket实现实时更新，避免轮询

安全性：

• 实现适当的认证和授权
• 防止SQL注入和XSS攻击
• 使用HTTPS保护数据传输

可扩展性：

• 设计可扩展的架构，便于添加新的图表类型
• 使用配置而非硬编码值
• 实现模块化设计

用户体验：

• 提供加载指示器
• 实现响应式设计适应不同设备
• 添加交互功能如缩放、悬停提示等

7. 总结与展望

7.1 总结

本文详细介绍了如何将Highcharts与Spring Boot完美融合，打造动态数据可视化解决方案。我们从环境搭建开始，逐步构建了一个完整的销售数据可视化系统，并扩展到了系统性能监控场景。通过这个解决方案，我们可以：

• 使用Spring Boot构建强大的后端服务
• 利用Highcharts创建美观、交互式的图表
• 通过WebSocket实现实时数据更新
• 设计响应式用户界面适应不同设备

7.2 展望

未来，我们可以进一步扩展这个解决方案：

1. 增强数据分析能力：集成机器学习算法进行预测分析添加更多数据聚合和统计功能
2. 集成机器学习算法进行预测分析
3. 添加更多数据聚合和统计功能
4. 提升用户体验：实现更丰富的交互功能添加自定义仪表板功能支持图表导出和报告生成
5. 实现更丰富的交互功能
6. 添加自定义仪表板功能
7. 支持图表导出和报告生成
8. 扩展应用场景：适用于更多业务领域如金融、物流、医疗等支持更多数据源如IoT设备、社交媒体等
9. 适用于更多业务领域如金融、物流、医疗等
10. 支持更多数据源如IoT设备、社交媒体等
11. 技术升级：采用微服务架构提高可扩展性使用容器化部署简化运维集成云服务提升可靠性
12. 采用微服务架构提高可扩展性
13. 使用容器化部署简化运维
14. 集成云服务提升可靠性

增强数据分析能力：

• 集成机器学习算法进行预测分析
• 添加更多数据聚合和统计功能

提升用户体验：

• 实现更丰富的交互功能
• 添加自定义仪表板功能
• 支持图表导出和报告生成

扩展应用场景：

• 适用于更多业务领域如金融、物流、医疗等
• 支持更多数据源如IoT设备、社交媒体等

技术升级：

• 采用微服务架构提高可扩展性
• 使用容器化部署简化运维
• 集成云服务提升可靠性

Highcharts与Spring Boot的结合为数据可视化提供了强大而灵活的解决方案。通过本文的指导，你已经掌握了从零开始构建动态数据可视化系统的关键技能，可以将其应用到实际项目中，实现数据驱动的决策支持。