時系列チャートを実装しています。

Question

HighChartsライブラリからの拡大/縮小チャートをAngular 4プロジェクトで実装しようとしています。そのような教材を公式ドキュメントと同じように見つけました。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" 
    } 
} 

スディオが私に伝えているコードで前進する：「[ts]名前が見つからない 'plotOptions' "

Answer 1

私は

Plunker live example

UPD例の時系列グラフの、angular2-highchartsを使用します。次のコードを変更するangular-highchartsライブラリ 試し用 ：

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