Implementiert Zeitreihendiagramm Highcharts in Angular 4

Question

Ich versuche, eine Zeitreihe, zoombare Chart von HighCharts-Bibliothek in einem Angular 4 Projekte zu implementieren Ich fand einige Tutoral wie diese (ähnlich der offiziellen Dokumente): Time series charts Ich weiß nicht, welchen Import ich einführen soll, gibt es einige, die es schon getan haben? Vielen Dank im Voraus für die Hilfe

mein app.ts hier:

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() { 
    } 

    } 

Und hier ist mein app.html:

Hier ist meine 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" 
    } 
} 

Bis ich Vorwärts im Code bewegen visular sudio sagt mir: "[ts] Kann den Namen 'plotOptions' nicht finden"

Answer 1

Ich benutze angular2-highcharts, zum Beispiel Zeitreihen-Charts

Plunker live example

UPD: für angular-highcharts Bibliothek versuchen, Ihren Code zum nächsten zu ändern:

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 
     } 
    } 
});