devExpress 차트를 사용하여 동일한 그래프에서 다중 데이터 소스를 처리 할 수있는 방법이 있습니까

Question

3 개의 다른 데이터 소스로 그래프를 표시해야합니다. 같은 그래프에 3 개나 2 개 또는 1 개의 dataSource를 모두 표시해야합니다. 각 dataSource 값은 y 축 값이 아닌 x 축이 dateTime 인 방식으로 다릅니다. 어느 누구도이 문제를 해결할 수 있습니까?

Answer 1

예제 코드는 임의의 3 개의 다른 데이터 소스 값을 생성합니다. html 및 ts 파일의 코드는 아래에 언급 된 코드 블록에 있습니다.

HTML 코드

<div style="text-align: center"> 
    <label class="checkbox-inline text-danger"><input type="checkbox" checked (click)="showOne()"><b> Audio</b></label> 
    <label class="checkbox-inline text-success"><input type="checkbox" checked (click)="showTwo()"><b> Frozen</b></label> 
    <label class="checkbox-inline text-info"><input type="checkbox" checked (click)="showThree()"><b> Color</b></label> 
</div> 
    <div id="popup"> 
     <dx-chart id="chart" [dataSource]="devGraphData" 
     [animation]="false" 
     zoomingMode="all" scrollingMode="all"> 
     <dxo-size [height]="300"></dxo-size> 
     <dxi-value-axis [valueMarginsEnabled]="true" > 
     <dxo-grid [visible]="false"></dxo-grid></dxi-value-axis> 
     <dxi-series type="area" valueField="value1" name="data1" color="red"><dxo-point [visible] = false></dxo-point></dxi-series> 
     <dxi-series valueField="value2" name="data2" color="green"><dxo-point [visible] = true symbol="triangleDown"></dxo-point></dxi-series> 
     <dxi-series valueField="value3" name="data" color="blue"><dxo-point [visible] = true></dxo-point></dxi-series> 
     <dxo-common-series-settings argumentField="index" type="line" tagField="data"></dxo-common-series-settings> 
     <dxo-argument-axis [valueMarginsEnabled]="false"></dxo-argument-axis> 
     <dxo-tooltip [enabled]="true"></dxo-tooltip> 
     <dxo-legend [visible]="false"></dxo-legend> 
     <dxo-scroll-bar [visible]="true"></dxo-scroll-bar> 
     </dx-chart> 
    </div> 

TS 코드

export class MultiChartComponent { 
    devGraphData: MultiChartComponent[] = []; 
    devGraphData1: MultiChartComponent[] = []; 
    devGraphData2: MultiChartComponent[] = []; 
    devGraphData3: MultiChartComponent[] = []; 
    devGraphIndex: number = 0; 
    devGraphIndex2: number = 0; 
    devGraphIndex3: number = 0; 
    devData: any; 
    firstChart: boolean = false; 
    secondChart: boolean = false; 
    thirdChart: boolean = false; 

    constructor(public globalService:GlobalService) { 
     Observable.interval(3000).subscribe(x => { 
      this.getData(0,1); 
     }); 
     Observable.interval(3000).subscribe(x => { 
      this.getData(2,3); 
     }); 
     Observable.interval(3000).subscribe(x => { 
      this.getData(4,5); 
     }); 
     this.showOne(); 
     this.showTwo(); 
     this.showThree(); 
    } 

    public getData(minValue: any, maxValue: any) { 
     this.devGraphIndex = this.devGraphIndex + 1; 
     if (minValue === 0 && maxValue === 1) { 
      this.devData = { 'index': this.devGraphIndex, 'value1': this.getRandomInt(minValue, maxValue)}; 
      this.devGraphData1.push(this.devData); 
      this.concatArrays(); 
      if(this.devGraphData1.length > 50) { 
       this.devGraphData1.splice(0, 1); 
      } 
     } 
     if (minValue === 2 && maxValue === 3) { 
      this.devData = { 'index': this.devGraphIndex, 'value2': this.getRandomInt(minValue, maxValue) }; 
      this.devGraphData2.push(this.devData); 
      this.concatArrays(); 
      if(this.devGraphData2.length > 50) { 
       this.devGraphData2.splice(0, 1); 
      } 
     } 
     if (minValue === 4 && maxValue === 5) { 
      this.devData = { 'index': this.devGraphIndex, 'value3': this.getRandomInt(minValue, maxValue) }; 
      this.devGraphData3.push(this.devData); 
      this.concatArrays(); 
      if(this.devGraphData3.length > 50) { 
       this.devGraphData3.splice(0, 1); 
      } 
     } 
    } 

    public getRandomInt(min:any, max:any) { 
     return Math.abs(Math.random() * (max - min + 1)) + min; 
    } 

    public showOne() { 
     this.devGraphData = []; 
     if (this.firstChart === true) { 
      this.firstChart = false; 
     } else { 
      this.firstChart = true; 
     } 
     this.concatArrays(); 
    } 

    public showTwo() { 
     this.devGraphData = []; 
     if (this.secondChart === true) { 
      this.secondChart = false; 
     } else { 
      this.secondChart = true; 
     } 
     this.concatArrays(); 
    } 

    public showThree() { 
     this.devGraphData = []; 
     if (this.thirdChart === true) { 
      this.thirdChart = false; 
     } else { 
      this.thirdChart = true; 
     } 
     this.concatArrays(); 
    } 

    public concatArrays() { 
     if(this.firstChart === true && this.secondChart === true && this.thirdChart === true) { 
      this.devGraphData = this.devGraphData2.concat(this.devGraphData3); 
      this.devGraphData = this.devGraphData.concat(this.devGraphData1); 
     } else if(this.firstChart === true && this.secondChart === true) { 
      this.devGraphData = this.devGraphData1.concat(this.devGraphData2); 
     } else if(this.secondChart === true && this.thirdChart === true) { 
      this.devGraphData = this.devGraphData2.concat(this.devGraphData3); 
     } else if(this.firstChart === true && this.thirdChart === true) { 
      this.devGraphData = this.devGraphData1.concat(this.devGraphData3); 
     } else if(this.firstChart === true) { 
      this.devGraphData = this.devGraphData.concat(this.devGraphData1); 
     } else if(this.secondChart === true) { 
      this.devGraphData = this.devGraphData.concat(this.devGraphData2); 
     } else if(this.thirdChart === true) { 
      this.devGraphData = this.devGraphData.concat(this.devGraphData3); 
     } 
    } 
}