如何以角度设置图表的数据，该数据取自存储在 mongodb 中并显示在 html 页面上的后端 nodejs api

Question

app.component.html这是我的 app.component 文件，我在其中显示了我的图表

    <div style="display: block;">
         <canvas baseChart width="400" height="400"
                    [datasets]="lineChartData"
                    [labels]="lineChartLabels"
                    [options]="lineChartOptions"
                    [colors]="lineChartColors"
                    [legend]="lineChartLegend"
                    [chartType]="lineChartType">
         </canvas>
     </div>

app.component.ts我的 ts 文件在那里实现了逻辑我有问题我不知道如何执行逻辑来显示数据我有问题如何在其中创建将在 app.component.html 文件中调用的方法

   constructor(private chartService: ChartServiceService) { }
    
   ngOnInit(): void {
      this.getlinechart();
   }
 getlinechart(){
     this.chartService.getLineChart().subscribe(res => {
     this.linechart = res;
     console.log(res);

     let lincechartData = res.list[0].data;
     let lincechartLabels =  res.list[0].graphlabels;
  
     public lineChartData:any = this.lincechartData;
      **I,m facing issue here above to create method to store the 
        data and used in html compiler give the error this ,' 
 expected.ts(1005)
 Cannot find name 'lineChartData'**
  
});

app.service.ts这是从后端nodejs api获取数据的服务文件

  getLineChart(){
       return this.httpClient.get<any> 
        ('http://localhost:3000/api/chart/line')
      .pipe(
        map(result => result)
      )

}

Answer 1

如果我理解正确，您正在尝试从数据库中读取数据并将其放在图表上。 我做了类似的事情，但我有一些不同的方法：

HTML：

<canvas id="myChart" width="300" height="100"></canvas> <br/>

图表配置：

var config = {
    type: 'line',
    data: { datasets: [] }, // trend data goes here
    options: { 
        scales: {
            xAxis: { // x axis
                type: 'time',
            }
        },
    },
}

新图表：

function newChart() {
     config.data.datasets = []; // reset data
     populateTrend(config); // populate chart

     if (window.hasOwnProperty("graph")) { // destroy previous chart
          if (typeof window.graph.resetZoom !== "undefined") { // if you have a zoom plugin
               window.graph.resetZoom();
          }
          window.graph.destroy();
     }

     let ctx = document.getElementById('myChart').getContext('2d'); // canvas
     window.graph = new Chart(ctx, config); // make the chart
}

人口趋势：

function populateTrend (config) {
    // data sets and scales
    let datasets = config.data.datasets, scales = config.options.scales;

    let log = data; // this is where you read from your database

    let dataset = { // add some data here
        data: [],
        label: log.description, 
        fill: false, 
        radius: 0,
        unit: log.unit, 
        pointType: log.pointType,
        yAxisID: log.unit, // y axis
    };

    // this is where the real data goes
    // you should push the data in a loop
    dataset.data.push({
        "x": something.getTime(),
        "y": null,
        "ymin": null,
        "ymax": null,
    });

    datasets.push(dataset); // add data set to config
}