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

Question

I am trying to implement a Time series, zoomable Chart from HighCharts library in an Angular 4 projects I found some tutoral like that one (similar to the one the official docs) : Time series charts but I don't know witch import I should put in it, is there some who already did it? Thanks in advance for the help

Here's my 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() {
  }

  }

And here's my app.html:

Here's my 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"
  }
}

Until I move forward in the code visular sudio is tellling me : "[ts] Cannot find name 'plotOptions'"

Answer 1

I use angular2-highcharts , for example time series charts

Plunker live example

UPD: for angular-highcharts library try to change your code to the next:

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('rgba')]
                ]
            },
            marker: {
                radius: 2
            },
            lineWidth: 1,
            states: {
                hover: {
                    lineWidth: 1
                }
            },
            threshold: null
        }
    }
});