在Angular 4中实现时间序列图Highcharts

Question

我正在尝试在一个Angular 4项目中实现一个来自HighCharts库的时间序列，可缩放图表。我找到了一些像这样的教程(类似于官方文档中的那个)：Time series charts，但我不知道我应该把它放进去，有没有人已经这么做了？提前感谢你的帮助

这是我的app.ts：

import { Chart } from 'angular-highcharts';


export class MyVerticalchartComponent  {


   @Input() showMePartially: boolean;
    // Içi je crée un un import depuis le composent appliV2.html

      chart = new Chart({
      chart: {
        zoomType: 'x'
     },
      plotOptions = {
   area: {
      fillColor: {
         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
         stops: [
            [0, Highcharts.getOptions().colors[0]],
            [1, 
  Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0).get('rgb
    a')]
         ]
      },
      marker: {
         radius: 2
      },
      lineWidth: 1,
      states: {
         hover: {
            lineWidth: 1
         }
      },
      threshold: null
        });

  // add point to chart serie
  add() {
    this.chart.addPoint(Math.floor(Math.random() * 10));
  }


  constructor() {
  }

  }

下面是我的app.html：

这是我的package.json：

{
  "name": "front-end",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
"@angular/animations": "^4.0.3",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.1.0-rc.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@swimlane/ngx-charts": "^5.3.1",
"angular-highcharts": "^3.2.1",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"d3": "^4.9.1",
"font-awesome": "^4.7.0",
"highcharts": "^5.0.12",
"primeng": "^2.0.5",
"rxjs": "^5.1.0",
"typescript": "^2.2.1",
"zone.js": "^0.8.4"
  },
  "devDependencies": {
"@angular/cli": "1.0.4",
"@angular/compiler-cli": "^4.0.0",
"@types/highcharts": "^4.2.56",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"canonical-path": "0.0.2",
"codelyzer": "~2.0.0",
"concurrently": "^3.2.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"lodash": "^4.16.4",
"protractor": "~5.1.0",
"rimraf": "^2.5.4",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
  }
}

直到我继续编写代码，visular sudio才告诉我："ts找不到名称'plotOptions'“。