当我使用来自http.get的数据时，无法在Angular 2中呈现Highcharts

当您使用来自http.get的数据时，无法在Angular 2中呈现Highcharts的原因可能是数据的异步加载导致Highcharts无法正确渲染。解决这个问题的一种方法是使用Angular的异步管道（AsyncPipe）来处理数据的异步加载。

首先，您需要确保在Angular项目中正确引入Highcharts库。您可以通过在index.html文件中添加Highcharts的CDN链接或将Highcharts的JavaScript文件下载到本地并在angular.json文件中进行引用。

接下来，您需要在Angular组件中使用http.get方法获取数据。在获取到数据后，您可以使用异步管道（AsyncPipe）来处理数据的异步加载。异步管道会自动订阅和取消订阅Observable对象，确保数据的正确加载和销毁。

在组件的模板文件中，您可以使用Highcharts组件来呈现图表。您可以将获取到的数据绑定到Highcharts组件的数据属性上，并在ngOnInit生命周期钩子函数中初始化Highcharts图表。

以下是一个示例代码：

在组件的.ts文件中：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
  chartData$: Observable<any>;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.chartData$ = this.http.get('your_data_url');
  }
}

在组件的.html文件中：

<app-highcharts [data]="chartData$ | async"></app-highcharts>

在上面的示例中，我们使用HttpClient来发起http.get请求，并将获取到的数据赋值给chartData$属性。然后，我们使用异步管道（AsyncPipe）将chartData$属性绑定到Highcharts组件的data属性上。

请注意，上述示例中的"your_data_url"应替换为您实际获取数据的URL。

最后，您需要创建一个名为Highcharts的自定义组件，用于呈现Highcharts图表。在该组件中，您可以使用Highcharts库的API来配置和渲染图表。

这是一个简单的Highcharts组件示例代码：

import { Component, Input, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-highcharts',
  template: '<div [id]="chartId"></div>',
  styleUrls: ['./highcharts.component.css']
})
export class HighchartsComponent implements OnInit {
  @Input() data: any;
  chartId: string;

  constructor() {
    this.chartId = 'chart-' + Math.random().toString(36).substring(7);
  }

  ngOnInit() {
    Highcharts.chart(this.chartId, {
      // Highcharts配置选项
      series: [{
        data: this.data
      }]
    });
  }
}

在上面的示例中，我们使用@Input装饰器来接收来自父组件的数据，并生成一个唯一的chartId用于在模板中渲染Highcharts图表。在ngOnInit生命周期钩子函数中，我们使用Highcharts.chart方法来初始化图表，并将数据传递给series属性。

请注意，上述示例中的Highcharts配置选项仅供参考，您需要根据实际需求进行配置。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库MySQL版、腾讯云CDN等。您可以访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。