问题
This is the content of stock_inf.ts
file(Actually there are bigger and different arrays, but just for summery i Put these similar arrays):
export const Mellat = [1789.35, 1762.42, 1770.88, 1771.65, 1776.27, 1766.26, 1706.23];
export const Khodro= [1789.35, 1762.42, 1770.88, 1771.65, 1776.27, 1766.26, 1706.23];
export const Shepna= [1789.35, 1762.42, 1770.88, 1771.65, 1776.27, 1766.26, 1706.23];
This is a part of flow.component.ts
file and these are some functions of (click)
events on some forms and other flow objects:
setInput(selectedValue){
console.log('The selected input is:' , selectedValue);
switch(selectedValue){
case 'وبملت':
pricess = this.mellat;
this.label1 = 'نام سهام: بانک ملت';
break;
case 'خودرو':
pricess = this.khodro;
this.label1 = 'نام سهام: ایران خودرو ';
break;
case 'شپنا':
pricess = this.shepna;
this.label1 = 'نام سهام: پالایش نفت اصفهان ';
break;
default:
break;
}
}
setRsi(selectedValue){
console.log('The RSI period is:' , selectedValue);
periodd = selectedValue;
this.label2 = ' نام اندیکاتور: RSI';
this.label3 = ' دوره زمانی: ' + periodd + 'روزه';
rsi_result = rsi({period: periodd, values: pricess});
console.log('The RSI result is:' , rsi_result);
}
setMacd(selectedValue1, selectedValue2){
console.log('The MACD period one is:' , selectedValue1);
console.log('The MACD period two is:' , selectedValue2);
this.label2 = 'نام اندیکاتور: MACD';
periodd = selectedValue1;
this.label3 = ' دوره زمانی: ' + periodd + ' روزه';
//this.macd_p2 = selectedValue2;
this.doMacd(periodd, pricess);
}
doMacd(periodd , pricess){
macd_result = sma({period: periodd, values: pricess});
console.log('sma result is:' , macd_result );
}
doOutput(){
this.dialog.open(NgxChartsComponent ) ; //, {width: '500px', height: '500px'});
}
}
export const RSI_RESULT = rsi_result;
export const MACD_RESULT = macd_result;
And the following is the content of ngx-charts.component.ts
file:
import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material';
import {MACD_RESULT , RSI_RESULT} from '../flow/flow.component';
import {Mellat, Khodro, Shepna} from '../shared/stock_inf';
import { NewsComponent } from '../news/news.component';
@Component({
selector: 'app-ngx-charts',
templateUrl: './ngx-charts.component.html',
styleUrls: ['./ngx-charts.component.scss']
})
export class NgxChartsComponent implements OnInit {
constructor(public dialogRef: MatDialogRef<NgxChartsComponent>) { }
// data goes here
public single = [
{
"name": " درصد سود",
"value": 69
},
{
"name": " درصد زیان",
"value": 31
},
];
mellat = Mellat;
khodro = Khodro;
shepna = Shepna;
macd_result = MACD_RESULT;
rsi_result = RSI_RESULT;
// LENGTH = RSI_RESULT.length;
newArray = RSI_RESULT.map((e, i) => ({
name: (i + 1).toString(),
"value": e,
}));
public mmulti = [
{
"name": "Mellat",
"series": this.newArray
},
{
"name": "Khodro",
"series": this.newArray
},
{
"name": "Shepna",
"series": this.newArray
}
];
//{name: (i + 1).toString(), value: e.toString()}
view: any[] = [700, 400];
// options for the chart
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'زمان';
showYAxisLabel = true;
yAxisLabel = 'قیمت';
timeline = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
// line, area
autoScale = true;
//pie
showLabels = true;
explodeSlices = false;
doughnut = false;
ngOnInit() {
console.log(this.newArray);
}
}
Finally ngx-charts.component.html
file:
<!-- The chart type goes in here -->
<div> نمایش نتایج حاصل از اعمال استراتژی</div>
<div style="display: inline-block; direction: rtl;">
<ngx-charts-line-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale"
[timeline]="timeline"
(select)="onSelect($event)">
</ngx-charts-line-chart>
</div>
<br>
<div> نتیجه ی سیگنالهای معاملاتی و سود و زیان</div>
<div style="display: inline-block; direction: rtl;">
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single"
[legend]="showLegend"
[explodeSlices]="explodeSlices"
[labels]="showLabels"
[doughnut]="doughnut"
[gradient]="gradient"
(select)="onSelect($event)">
</ngx-charts-pie-chart>
</div>
What I am doing is playing with flow objects and get RSI_RESULT
or MACD_RESULT
as arrays, then passing them to above code and merge it with indices and try to ploting them. I also tried to add other stocks to make a series in multi
array but it doesn't work. This is the error I get:
ERROR TypeError: Cannot read property 'map' of undefined
at new NgxChartsComponent (ngx-charts.component.ts:44)
at createClass (core.js:27865)
at createDirectiveInstance (core.js:27685)
at createViewNodes (core.js:38315)
at createRootView (core.js:38187)
at callWithDebugContext (core.js:39716)
at Object.debugCreateRootView [as createRootView] (core.js:38953)
at ComponentFactory_.create (core.js:26827)
at ComponentFactoryBoundToModule.create (core.js:22791)
at ViewContainerRef_.createComponent (core.js:26983)
来源:https://stackoverflow.com/questions/59791587/ngxchartscomponent-host-ngfactory-js-sm1-error-typeerror-cannot-read-proper