不借助第三方库，Angular5集成官方Highcharts的后续步骤咨询

既然你已经通过npm install highcharts --save完成了安装，接下来我给你一步步拆解怎么直接用官方Highcharts，不用第三方封装库：

1. 在目标组件中引入Highcharts #

打开你要添加图表的组件TS文件（比如app.component.ts），在文件顶部导入Highcharts核心库：

import * as Highcharts from 'highcharts';

2. 在模板中添加图表渲染容器 #

在组件的HTML模板里，新增一个DOM元素作为图表的载体，记得设置好宽高和唯一ID，方便后续定位：

<div id="myChart" style="width: 800px; height: 400px;"></div>

3. 初始化并渲染图表 #

在组件的ngOnInit生命周期钩子中，编写图表的配置项，然后调用Highcharts的chart方法把图表渲染到指定容器里：

ngOnInit() {
  // 定义图表的配置参数，官方文档里的所有配置都能直接用
  const chartConfig: Highcharts.Options = {
    title: {
      text: '我的第一个Angular Highcharts图表'
    },
    xAxis: {
      categories: ['一月', '二月', '三月', '四月', '五月']
    },
    series: [{
      name: '月度销量',
      type: 'column',
      data: [120, 150, 180, 130, 200]
    }]
  };

  // 把图表渲染到ID为myChart的容器中
  Highcharts.chart('myChart', chartConfig);
}

4. （可选）导入扩展模块实现高阶功能 #

如果需要导出图表、动态数据更新这类进阶功能，得单独导入对应的模块并初始化：
比如要启用导出功能：

// 先导入导出模块
import HC_exporting from 'highcharts/modules/exporting';

// 在组件初始化前完成模块注册
HC_exporting(Highcharts);

这样就完成基础集成啦，你可以根据业务需求修改chartConfig里的配置项，完全贴合官方Highcharts的用法~

内容的提问来源于stack exchange，提问作者user3242013