0

我正在尝试使用 angular 创建地图，使用 angular-google-chart，“geo-chart”，带有滑块，“@ angular-slider / ngx-slider”，这将显示多年来气候对我们星球的影响。多亏了python“flask”服务器，我在angular客户端上加载了所有数据，我的最终数据数组中有3列：实体->国家名称、年份和当年的数据。为了浏览这些年并加载那一年的新数据，我为滑块创建了一个函数，在那一刻我有滑块的年份，我将做一个过滤器从我的数组中获取确切的年份。整个综合体按其应有的方式工作，也就是说，您可以根据国家的数据，看到这些年来国家的颜色变化。问题是每次我向前或向后推动滑块时，它都会继续“ 就像它继续发出请求并意识到它将无法停止并正常运行代码一样。我希望我尽可能清楚，提前为我用英语写作的方式感到抱歉。就像它继续发出请求并意识到它将无法停止并正常运行代码一样。我希望我尽可能清楚，提前为我用英语写作的方式感到抱歉。

我在下面为您提供了一个示例，说明我希望它如何出现，但我不明白为什么我的“闪烁”而不是它们。 https://ourworldindata.org/grapher/death-rate-by-source-from-indoor-air-pollution?time=1990

它们是我使用的相同数据，唯一的区别是我不使用“代码”列，因为我不需要它已经具有国家名称。 这是我的示例 ，想象每次我使用滑块时它都会轻弹并更改数据

file.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Options } from '@angular-slider/ngx-slider';




@Component({
 selector: 'app-geo-chart',
 templateUrl: './geo-chart.component.html',
 styleUrls: ['./geo-chart.component.css'],
})

export class GeoChartComponent implements OnInit {
 obsCiVett: Observable<any[]>;
 chartDataArray;
 mappedToArray;


options = {
 width: 1800,
 height: 1800,
 legend: false,
 colors: [
  '#fff6cc',
  '#f1c453',
  '#faa307',
  '#f48c06',
  '#e85d04',
  '#dc2f02',
  '#d00000',
  '#9d0208',
  '#6a040f',
  '#370617',
 ],
};

value: number = 1990;

options_slider: Options = {
 floor: 1990,
 ceil: 2019,
 showTicks: true,
};

constructor(public http: HttpClient) {}

ngOnInit(): void {

 this.obsCiVett = this.http.get<any>('http://127.0.0.1:5000/data');
 this.obsCiVett.subscribe(this.prepareGeoData);


 console.log('You are running jQuery version: ' + $.fn.jquery);
}

change(anno) {
 var arr = this.mappedToArray.filter((e) => {
  //console.log(e[1])
  return parseInt(e[1]) === anno.value;
});

 this.chartDataArray = new ChartData('Titolo','GeoChart',arr,['State', 'Deaths'],this.options)


 return true;
}


 prepareGeoData = (data: any) => {
 this.mappedToArray = data.map((d) => Array.from(Object.values(d)));


 this.chartDataArray = new ChartData(
   'Titolo',
   'GeoChart',
   this.mappedToArray,
   ['State', 'Deaths'],
   this.options
  );
 };
};

export class ChartData {
  constructor(public title, public type, public data, public columnNames, public options) {
    this.data = data


  }

  change_data(data){
    this.data = data;
  }
}

地理图

file.html
<div class="container">
<div class="row justify-content-center">
  
  <div>
        <google-chart [title]="chartDataArray.title" [type]="chartDataArray.type" [data]="chartDataArray.data" [options]="chartDataArray.options">
        </google-chart>
        
   <div>
</div>

滑块

<ngx-slider [(value)]="value" [options]="options_slider" (valueChange)="change({value})"></ngx-slider>

到达我的数据是一个对象数组

this.mappedToArray = data.map((d) => Array.from(Object.values(d)));

使用此代码，我将它们转换为数组数组，因为谷歌图表想要这样。

这是我处理的最终数据的一个例子

这是我的最终数据

4

0 回答 0