Profil detayı eklendi, herkes profillerine girip bir gözatsın! Sevdiğiniz üyelerin cevaplarını takip edin! Tüm güncellemeler

angular butona tıklandığında devamı içerde

merhaba arkadaşlar. Bu şekil 6 adet butonum var ve tıkladığımda bana chart js ile tarihi verileri getiriyor fakat sınama falan yapmadım ve angular bilgim yok araştırıp yolunu bulamadım birinci butona tıkladığımda grafik açılıyor sonra baktım tamam ikinci ye tıklayınca üçüncüye tıklayınca vs hepsi grafiği gösteriyor fakat hepsi açık durduğundan alt alta üstüste karışıyor galiba bazen diğerleri görünüyor grafık verilerinde gezinirken

1D


1W


1M



örnek fonksiyon cağrılan bu tarz 6 fonksiyon var ama birini çağırıyorum geliyor ama diğerini çağırdığımda ilk çağırdığım kapanmıyor disable olmuyor nasıl çözerim acil yardım


gethistoday1() {


           let res:Observable;

     res = this.http.get('https://min-api.cryptocompare.com/data/histohour?fsym=BTC&tsym=USD&limit=24&api_key=c185f2105403f26015f17143291cc867458b91220f96e9bbb941b66e1174001b');

     res.subscribe(resu => {

        // this.history = resu["Data"];

        let alldata = resu["Data"].map(resu => resu.time);

      let open = resu["Data"].map(resu => resu.open );

            let close = resu["Data"].map(resu => resu.close );



      let historicaldates = []

      alldata.forEach((resu) => {

         let jsdate = new Date(resu * 1000)

         historicaldates.push(jsdate.toLocaleTimeString('en', {year: 'numeric', month: 'short', day: 'numeric'}));

      })

          //this.canvas = document.getElementById('myChart');

   //this.ctx = this.canvas.getContext('2d');

   //let myChart = new Chart(this.ctx, {

      //Chart.defaults.global.legend.display = true;

      Chart.defaults.global.responsive = true;

      Chart.defaults.global.defaultFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";

      Chart.defaults.global.defaultFontStyle = 'normal';

      Chart.defaults.global.defaultFontSize = 8.5;

      Chart.defaults.global.defaultFontColor = 'light-gray';

     this.lineChart = new Chart(this.lineCanvas.nativeElement, {


           type: 'line',

           data: {

               labels: historicaldates,


               datasets: [

                   {

           label: "Data",

           borderColor: "#80b6f4",

           pointBorderColor: "#80b6f4",

           pointBackgroundColor: "#80b6f4",

           pointHoverBackgroundColor: "#80b6f4",

           pointHoverBorderColor: "#80b6f4",

           pointBorderWidth: 5,

           pointHoverRadius: 10,

           pointHoverBorderWidth: 1,

           pointRadius: 3,

           fill: false,

           borderWidth: 4,

           data: close,


                   }

               ]

           },

         //options start


         options: {

       legend: {

           position: "bottom"

       },

       scales: {

           yAxes: [{

               ticks: {

                   fontColor: "rgba(0,0,0,0.5)",

                   fontStyle: "bold",

                   beginAtZero: true,

                   maxTicksLimit: 5,

                   padding: 20

               },

               gridLines: {

                   drawTicks: false,

                   display: false

               }


}],

           xAxes: [{

               gridLines: {

                   zeroLineColor: "transparent"


},

               ticks: {

                   padding: 20,

                   fontColor: "rgba(0,0,0,0.5)",

                   fontStyle: "bold"

               }

           }]

       }

   }

         //options end

   });

     });



 }

1

Cevaplar (1)

İşlem devam ediyor, lütfen bekleyin..
Serdar Güler
@gulers
1 hafta önce

Merhaba attığın kod ile çözüm bulmak pek mümkün değil :) Ön yüz olarak hayal ediyorum 6 tane kutu var. Bunlardan bi tanesi tıklandığında tüm kutulara gizle diye bir class atayabilirsin. Tıklananın kendisine de göster diye class. Bundan sonrası da css üzerinden gizlenmesi gereken yerleri gizle class'ı üzerinden yapabilirsin. Projeni web üzerinde herkesin görebileceği bir yere koyabilirsen daha ayrıntılı yardım edilebilir.

Cevapla @muratcankuruoffical1 hafta önce
@gulers, şöyle anlatayım ilk söylediğim şekli değiştirdim tek fonksiyona 6 buttondan farklı farklı url apileri gönderdim apiden gelen bilgiler chart js ye aktarılarak bana grafik gösteriliyor fakat üstüste biniyor grafiğin üstünde gezindiğimde mesela 1 haftalık açıkkken 1 günlükte ortaya cıkıyor

<ion-button size="small" color="light" (click)="gethisto('https://min-api.cryptocompare.com/data/histohour?fsym=BTC&tsym=USD&limit=24&api_key=c185f2105403f26015f17143291cc867458b91220f96e9bbb941b66e1174001b')">1D</ion-button>
<ion-button size="small" color="light" (click)="gethisto('https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=14&api_key=c185f2105403f26015f17143291cc867458b91220f96e9bbb941b66e1174001b')">1W</ion-button>
<ion-button size="small" color="light" (click)="gethisto('https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=30&api_key=c185f2105403f26015f17143291cc867458b91220f96e9bbb941b66e1174001b')">1M</ion-button>
<ion-button size="small" color="light" (click)="gethisto('https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=180&api_key=c185f2105403f26015f17143291cc867458b91220f96e9bbb941b66e1174001b')">6M</ion-button>
<ion-button size="small" color="light" (click)="gethisto('https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=365&api_key=c185f2105403f26015f17143291cc867458b91220f96e9bbb941b66e1174001b')">1Y</ion-button>
<ion-button size="small" color="light" (click)="gethisto('https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=1825&api_key=c185f2105403f26015f17143291cc867458b91220f96e9bbb941b66e1174001b')">5Y</ion-button>



gethisto(url: string) {

let res:Observable<any>;
res = this.http.get(url);
res.subscribe(resu => {
// this.history = resu["Data"];
let alldata = resu["Data"].map(resu => resu.time);
let open = resu["Data"].map(resu => resu.open );
let close = resu["Data"].map(resu => resu.close );


let historicaldates = []
alldata.forEach((resu) => {
let jsdate = new Date(resu * 1000)
historicaldates.push(jsdate.toLocaleTimeString('en', {year: 'numeric', month: 'short', day: 'numeric'}));
})
//this.canvas = document.getElementById('myChart');
//this.ctx = this.canvas.getContext('2d');
//let myChart = new Chart(this.ctx, {
//Chart.defaults.global.legend.display = true;
Chart.defaults.global.responsive = true;
Chart.defaults.global.defaultFontFamily = "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.defaultFontStyle = 'normal';
Chart.defaults.global.defaultFontSize = 8.5;
Chart.defaults.global.defaultFontColor = 'light-gray';
this.lineChart = new Chart(this.lineCanvas.nativeElement, {

type: 'line',
data: {
labels: historicaldates,

datasets: [
{
label: "Data",
borderColor: "#80b6f4",
pointBorderColor: "#80b6f4",
pointBackgroundColor: "#80b6f4",
pointHoverBackgroundColor: "#80b6f4",
pointHoverBorderColor: "#80b6f4",
pointBorderWidth: 5,
pointHoverRadius: 10,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: false,
borderWidth: 4,
data: close,

}
]
},
//options start

options: {
legend: {
position: "bottom"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}

}],
xAxes: [{
gridLines: {
zeroLineColor: "transparent"

},
ticks: {
padding: 20,
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold"
}
}]
}
}
//options end
});
});


}
Cevapla @muratcankuruoffical1 hafta önce
herşey doğru ama sadece ben 1day tıklıyorum geliyor grafik sonra 1w haftalık bakmak istiyorum tıklıyorum oda geliyor ama grafik üzerinde gelınce böyle 1d da ortaya cıkıyor dolaştığımda D:
Cevapla @muratcankuruoffical1 hafta önce
yanı demek istediğim 1 haftalıga tıkladığımda ondan öncekileri nasıl etkisiz hale getirebilrim
İşlem devam ediyor, lütfen bekleyin..

Cevap yaz Sadece sorunun cevabını yazın

Yabancı Dizi Arşivi