複数の（ハイチャート）チャートをangular2で同期させるには

Question

グラフごとに1つのコンポーネントがあります。これらのグラフのx軸を同期させるにはどうすればよいですか？

Chartone

import {Component} from '@angular/core'; 
    import {ChartModule} from 'angular2-highcharts'; 
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 


    @Component({ 
    selector: 'chartone', 
    styles: [` 
    :host{ 
     position: absolute; 
     padding-top: 10px; 
     padding-right: 10px; 
    } 
    `], 
    template: ` 
    <chart [options]="options" 
     (load)="saveInstance($event.context)"> 
    </chart> 
    ` 
    }) 
     export class chartone { 
    constructor() { 

    this.options = { 
      xAxis: { 
      }, 
      yAxis:{ 
       plotLines: [{ 
       dashStyle: 'shortdot', 
       color: 'green', 
       value: '8', 
       width: '1.5', 
       zIndex: 2 
       }] 
      }, 

      credits: false, 
      chart: { 
       backgroundColor: '#e6f2ff', 
       borderColor: '#00D490', 
       borderWidth: 1, 
       type: 'spline', 
       width: 700, 
       }, 
      legend: { 
       enabled: false 
       }, 
      title: { text : 'Overview'}, 
      series: [{ color: '#25D366', data: [2,3,5,8,13] },{ color: '#3b5998', data:[4,6,9,11,15]}] 

      }; 

      setInterval(() => this.chart.series[0].addPoint(Math.random() * 10), 6000); 
      setInterval(() => this.chart.series[1].addPoint(Math.random() * 10), 6000); 

      chart : Object; 
      options : Object; 

    } 
    saveInstance(chartInstance) { 
    this.chart = chartInstance; 
    }; 
} 

Charttwo

import {Component} from '@angular/core'; 
import {ChartModule} from 'angular2-highcharts'; 
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 


@Component({ 
    selector: 'charttwo', 
    styles: [` 
    :host{ 
     position: absolute; 
     padding-top: 10px; 
     top: 410px; 
     left: 610px; 

    } 
    `], 
    template: ` 
    <chart [options]="options" 
     (load)="saveInstance($event.context)"> 
    </chart> 

    ` 
}) 
export class charttwo { 
    constructor() { 
    this.options = { 
      credits: false, 
      legend:{ 
       enabled:false, 
      }, 
      yAxis:{ 
       plotBands: [{ 
       color: 'rgba(0,170,0,0.3)', 
       from: 4, 
       to: 6, 
       }], 
      }, 
      chart: { 
       height: 300, 
       backgroundColor: '#e6f2ff', 
       borderColor: '#00D490', 
       borderWidth: 1, 
       type: 'scatter' 

      }, 
      title: { text : 'Average'}, 
      series: [{ color: '#25D366', data: [2,3,5,8,13] }, {color: '#3b5998',data:[4,6,9,11,15]}] 
      }; 

      setInterval(() => this.chart.series[0].addPoint(Math.random() * 10), 6000); 
      setInterval(() => this.chart.series[1].addPoint(Math.random() * 10), 6000); 
      chart : Object; 
      options : Object; 

    } 
    saveInstance(chartInstance) { 
    this.chart = chartInstance; 
    }; 
} 

最後に同期させるためにもっとして2つのチャートがあるでしょう。 これらのグラフのx軸を同期させるにはどうすればよいですか？

EDIT：Example

Answer 1

私はちょうど同じシリーズに、両方のチャートデータを組み合わせて、そのy軸を分割2/2 +角度

とあなたのための最も簡単な解決策を持っています。これは私のために働いています。以下は私のコードです。シリーズの中にあなたのデータを入れてください：データ、それは動作します。

 this.chartOption = { 
      chart: { 
       type: 'line',   
       zoomType: 'x', 
       height: 600,     

      //Theme of chart 
       backgroundColor: "#18252E", 
       style: { 
        fontFamily: '\'Unica One\', sans-serif' 
       }, 
       plotBorderColor: '#606063' 
      }, 
      title: { 
       text: "", 
       style: { 
       display: 'none', 
       color: '#E0E0E3', 
       textTransform: 'uppercase', 
       fontSize: '14px' 
       }    
      }, 
      tooltip: { 
       shared: true, 
       xDateFormat: '%m/%d/%Y', 
       valueDecimals: 2, 
       crosshairs: true, 
       backgroundColor: 'rgba(0, 0, 0, 0.85)', 
        style: { 
         color: '#F0F0F0' 
        } 
      },   
      xAxis: { 
      crosshair: true, 
      type: 'datetime', 
      dateTimeLabelFormats: { 
      year: '%Y' 
      } 
     }, 
     yAxis: [{ 
       title: { 
        text: 'Data1' 
       }, 
       height: 200, 
       lineWidth: 2 
      }, { 
       title: { 
        text: 'Data2' 
       }, 
       top: 300, 
       height: 200, 
       offset: 0, 
       lineWidth: 2 
      }], 
      legend: { 
       align: 'center', 
       verticalAlign: 'top', 
       layout: 'vertical', 
       x: 30, 
       y: 0, 

       itemStyle: { 
       color: '#ffffff', 
       fontSize: '14px' 
       } 
      }, 

      plotOptions: { 
       series: { 
        pointStart: 2010, 
        color: '#2B908F' 
       } 
      }, 

      series: [{ 
       name: "Data1", 
       data: this.yourData1, 
       yAxis : 0, 
      }, 
      { 
       name: "Data2", 
       data: this.yourData2, 
       color: '#90ee7e', 
       yAxis : 1 
      }] 
     };  

あなたのためPlunker