将Spring引导API中的数据显示到原始图表Angular中

，可以通过以下步骤实现：

创建一个Spring Boot项目，并添加所需的依赖，包括Spring Web和Spring Data JPA等。可以使用Maven或Gradle构建工具来管理依赖。
在Spring Boot项目中创建一个数据模型（Model），用于表示要显示的数据。例如，假设我们要显示一个简单的学生信息，可以创建一个名为Student的类，包含id、name和age等属性。
创建一个数据访问层（Repository），使用Spring Data JPA来处理与数据库的交互。在该层中，可以定义一些查询方法，用于从数据库中检索数据。
创建一个业务逻辑层（Service），用于处理业务逻辑。在该层中，可以调用数据访问层的方法来获取数据，并进行一些处理。
创建一个控制器（Controller），用于处理HTTP请求和响应。在该控制器中，可以注入业务逻辑层的实例，并定义一些请求处理方法。
在Angular项目中，使用HttpClient模块来发送HTTP请求，从Spring Boot后端获取数据。可以在Angular的服务（Service）中定义一个方法，使用HttpClient发送GET请求，并订阅返回的Observable对象。
在Angular项目中，使用图表库（如Chart.js、Highcharts等）来绘制图表。可以在Angular组件中引入图表库，并在模板中使用相应的标签来显示图表。
在Angular组件中，调用步骤6中定义的服务方法，获取数据，并将数据传递给图表库，以生成相应的图表。

以下是一个示例代码：

Spring Boot后端代码：

// Student.java
@Entity
public class Student {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private int age;
    // getters and setters
}

// StudentRepository.java
@Repository
public interface StudentRepository extends JpaRepository<Student, Long> {
    // 可以定义一些查询方法
}

// StudentService.java
@Service
public class StudentService {
    @Autowired
    private StudentRepository studentRepository;
    // 可以定义一些业务逻辑方法
}

// StudentController.java
@RestController
@RequestMapping("/students")
public class StudentController {
    @Autowired
    private StudentService studentService;
    
    @GetMapping
    public List<Student> getAllStudents() {
        return studentService.getAllStudents();
    }
}

Angular前端代码：

// student.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Student } from './student.model';

@Injectable({
  providedIn: 'root'
})
export class StudentService {
  private apiUrl = 'http://localhost:8080/students';

  constructor(private http: HttpClient) { }

  getAllStudents(): Observable<Student[]> {
    return this.http.get<Student[]>(this.apiUrl);
  }
}

// student.component.ts
import { Component, OnInit } from '@angular/core';
import { Student } from './student.model';
import { StudentService } from './student.service';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
  students: Student[];

  constructor(private studentService: StudentService) { }

  ngOnInit(): void {
    this.studentService.getAllStudents().subscribe(students => {
      this.students = students;
      // 调用图表库生成图表
    });
  }
}

// student.component.html
<div *ngFor="let student of students">
  <p>{{ student.name }}</p>
  <p>{{ student.age }}</p>
</div>

请注意，以上代码仅为示例，实际项目中可能需要根据具体需求进行修改和扩展。另外，图表库的使用方法和配置可能因库而异，请参考相应的文档和示例。

推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云数据库MySQL版（https://cloud.tencent.com/product/cdb_mysql）。

希望以上信息对您有所帮助！