我有一些有趣的尝试让注解工作-如果你还没有解决它，试试这个...
将导入语句更改为：

import * as ChartAnnotation from 'chartjs-plugin-annotation';

将ngOnInit()更改为：

ngOnInit() {
  let namedChartAnnotation = ChartAnnotation;
  namedChartAnnotation["id"]="annotation";
  Chart.pluginService.register( namedChartAnnotation);
  this.simpleChart();
}

最后，我认为注解对象应该是选项的子对象，而不是插件的子对象。

"options": {
    "legend": {
        "display": true
    },
    "scales": {
        "xAxes": [{
                "display": true
            }
        ],
        "yAxes": [{
                "display": true,
                "ticks": {
                    "min": 0,
                    "max": 40
                }
            }
        ]
    },
    "tooltips": {
        "enabled": true,
        "backgroundColor": "#eee",
        "titleFontColor": "#000"
    },
    "annotation": {
        "annotations": [{
                "type": "box",
                "xScaleID": "x-axis-0",
                "yScaleID": "y-axis-0",
                "yMin": 0,
                "yMax": 15,
                "xMin": 864,
                "xMax": 1285,
                "borderWidth": 1,
                "backgroundColor": "rgba(200,60,60,0.25)",
                "borderColor": "rgba(200,60,60,0.25)"
            }, {
                "type": "box",
                "xScaleID": "x-axis-0",
                "yScaleID": "y-axis-0",
                "yMin": 30,
                "yMax": 40,
                "xMin": 864,
                "xMax": 1285,
                "borderWidth": 1,
                "backgroundColor": "rgba(60,60,200,0.25)",
                "borderColor": "rgba(60,60,200,0.25)"
            }
        ]
    }
}

使一个漂亮的图形：）

（除了我得到了颜色低音ackwards！哎呀！）

作为Ade所说的一个补充。你也可以用这种方式添加插件

import { ChartOptions } from 'chart.js';
import * as ChartAnnotation from 'chartjs-plugin-annotation';

this.chart = new Chart('canvas', {
  ...
  options: {
    ...
    annotation: { ... }
  } as ChartOptions,
  plugins: [ChartAnnotation]
});

添加{...} as ChartOptions使得TypeScript不会抱怨

对于任何有TypeScript错误的人来说，注解不是ChartOptions属性。在寻找了一两个星期的答案后，我找到了解决这个问题的方法。
请遵循以下路径：节点模块/@类型/Chart.js/索引.d.ts
打开index.d.ts，定位到界面ChartOptions {并添加这一行。annotation？：对象; }
这就是我如何解决我的问题后，每一个其他的解决方案失败。

我最近也有同样的问题，我用构造函数下的registerPlugin修复了它。
下面是我的解决方案：
1.将插件导入到您的组件：

import * as annotations from 'chartjs-plugin-annotation';

1.将以下行添加到构造函数中：

constructor(...) { BaseChartDirective.registerPlugin(annotations);}

1.如果您使用的是typescript，则可能需要使用注解来扩展ChartOptions接口：

interface CustomizeChartOptions extends ChartOptions {
    annotation?: any
}

1.使用注解配置图表选项

public barChartOptions: CustomizeChartOptions = {
        // your other ChartOptions setting here
        annotation: {
            annotations: [
                {
                    drawTime: "afterDatasetsDraw",
                    type: 'line',
                    mode: 'vertical',
                    scaleID: 'x-axis-0',
                    value: '1 Dec',
                    borderColor: 'red',
                    borderWidth: 2,
                    label: {
                        content: 'CURRENT',
                        enabled: true,
                        position: 'top'
                    }
                }
            ]
        }

    };

我知道我迟到了，但是，到目前为止（ng 2-charts 3.0.11），这些答案都不起作用，因为API已经改变了。注解配置现在必须在插件中。注解插件在使用之前必须注册。下面是我从示例中发现的：在应用模块ts中：

import { NgChartsModule } from 'ng2-charts';
import { default as Annotation } from 'chartjs-plugin-annotation'

// ...
imports: [
  //...
  NgChartsModule.forRoot({
    defaults: {},
    plugins: [ Annotation ]
  }),
  // ...

然后，在component.ts文件中：

chartOptions: ChartConfiguration['options'] = {
  scales: {
    // ...
  },
  plugins: {
    annotation: {
      annotations: [
        {
          type: 'line',
          scaleID: 'y',
          value: 16,
          borderColor: 'green',
          borderWidth: 6
        },
      ]
    }
  },
}