点击导航中的某个按钮,我需要更新我的Amcharts图表吗?

时间:2018-03-14 06:53:34

标签: javascript css angular amcharts

export class ChartComponent implements OnInit, OnDestroy {
  public chart: AmChart;
  chartData1 = [];
  subscription: Subscription;
  public tokenName: any;
  data: any;
  changeGraph:any;
  lineColor1='#682382';
  fillColorField1='#682382';
  fillColors1='#682382';
  negativeLineColor1='#682382';
  negativeFillolors='#682382';
  themeType = "light";

  constructor(private AmCharts: AmChartsService, private chartservice: ChartService, readonly switchThemeService:SwitchThemeService) {
    console.log('chartService', this.AmCharts.charts);
    this.subscription = this.switchThemeService.getTheme().subscribe(message => { this.changeGraph = message;
      if(this.changeGraph === undefined){
        this.lineColor1='#682382';
        this. fillColorField1='#682382';
        this.fillColors1='#682382';
        this.negativeLineColor1='#682382';
        this.negativeFillolors='#682382';
        this.themeType = "light";
      }else{
      if(this.changeGraph.theme === true){
       this.lineColor1 = '#ffedc6';
       this.fillColorField1 = '#ffedc6';
       this.fillColors1 = '#ffedc6';
       this.negativeFillolors = '#ffedc6';
       this.negativeLineColor1 = '#ffedc6';
       this.themeType = "dark";
      }else{
        this.lineColor1='#682382';
        this. fillColorField1='#682382';
        this.fillColors1='#682382';
        this.negativeLineColor1='#682382';
        this.negativeFillolors='#682382';
        this.themeType = "light";
      }
    }

      });
  }

  ngOnInit() {
    this.getChartData();
    console.log('chart', this.chart);
    this.chartservice.getMinData( this.tokenName);

  }

  getChartData() {
    this.subscription = this.chartservice.chartData$.subscribe(
      item => {
        this.data = item;
        console.log('item', item);
        this.generateChartData();
      });
    this.subscription = this.chartservice.tokenName$.subscribe(
      item => {
        this.tokenName = item;
      }
    );
  }

  generateChart() {
    this.chart = this.AmCharts.makeChart('chartdiv', {
      'type': 'stock',
      'theme': this.themeType,
      'categoryAxesSettings': {
        'minPeriod': 'mm'
      },
      'dataSets': [{
        'title': this.tokenName,
        'fieldMappings': [{
          'fromField': 'value',
          'toField': 'value'
        }, {
          'fromField': 'volume',
          'toField': 'volume'
        }],
        'dataProvider': this.chartData1,
        'categoryField': 'date'
      }
      ],

      'panels': [{
        'showCategoryAxis': false,
        'title': 'Value',
        'percentHeight': 70,
        'categoryAxis': {
          'gridThickness': 0
        },
        'stockGraphs': [{
          'id': 'g1',
          'valueField': 'value',
          'lineColor': this.lineColor1,
          'fillColorsField': this.fillColorField1,
          'useDataSetColors': false,
          'fillAlphas': 0.4,
          'comparable': true,
          'compareField': 'value',
          'balloonText': '[[title]]:<b>[[value]]</b>',
          'compareGraphBalloonText': '[[title]]:<b>[[value]]</b>'
        }],
        'stockLegend': {
          'periodValueTextComparing': '[[percents.value.close]]%',
          'periodValueTextRegular': '[[value.close]]'
        }
      }, {
        'title': 'Volume',
        'percentHeight': 45,
        'marginLeft': 10,
        'columnWidth': 0.4,
        'categoryAxis': {
          'gridThickness': 0
        },
        'stockGraphs': [{
          'valueField': 'volume',
          'type': 'column',
          'showBalloon': false,
          'fillAlphas': 1,
          'lineColor': this.lineColor1,
          'fillColors': this.fillColors1,
          'negativeLineColor':this.negativeLineColor1,
          'negativeFillColors':this.negativeFillolors,
          'useDataSetColors': false,
          'compareGraphBalloonText': '[[title]]:<b>[[volume]]</b>'
        }],
        'stockLegend': {
          'periodValueTextRegular': '[[value.close]]'
        }
      }],

      'chartScrollbarSettings': {
        'enabled': false,
        'graph': 'g1'
      },

      'chartCursorSettings': {
        'valueBalloonsEnabled': true,
      },
    });
  }
  generateChartData() {
    if (this.data) {
      this.chartData1 = [];
      let temp = this.data.Data;
      let finalLength = this.data.Data.length;
      for (let i = 0; i < temp.length; i++) {
        this.chartData1.push({
          'date': new Date(temp[i].time * 1000),
          'value': temp[i].close,
          'volume': temp[i].volumefrom
        });
        if (finalLength === this.chartData1.length) {
          this.generateChart();
        }
      }
    }


  }
  ngOnDestroy() {
    // this.subscription.unsubscribe();
  }
}

嗨,这是我的图表组件,其中生成并呈现图表我使用服务从另一个组件获取值并更新图表的颜色,现在问题是DOM没有立即更新它&#39 ;只有当我去任何其他路线并且回来时它才会更新。有人可以帮我弄这个吗?

0 个答案:

没有答案