Nano Hash - криптовалюты, майнинг, программирование

Круговая диаграмма с методом подписки в Angular 4

есть очень небольшая проблема, но я не могу понять, я пытаюсь ввести значение «operating_rate» из Json в свою круговую диаграмму, используя angular2-highchart, rxjs и Angular 4, вот мой код (я думаю, что это проблема формата, потому что когда я сделал это с «operating_details», он выполнил свою работу):

pieChart.ts:

import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { UserService3 } from '../user3.service';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'my-daydetail',
  templateUrl: './my-daydetail.component.html',
  styleUrls: ['./my-daydetail.component.css']
})
export class MyDaydetailComponent implements OnDestroy, OnInit {



// Içi je crée un un import depuis le composent appliV2.html
    @Input() showMePartially: boolean;



    options: any;
    data: Object[];
    chart: any;
// Ici j'importe la variable Subscription de l'api Rxjs que je stock dans une variable
    dataSubscription: Subscription;


     constructor(public userService3: UserService3) {

           this.options = {
            chart: {  type: 'pie',
                 plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,  },
   //     legend: { enabled: false },
        credits: { enabled: false },
         tooltip: {
  //     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   },
   plotOptions: {
    pie: {
        allowPointSelect: false,
        cursor: 'pointer',
        dataLabels: {
            enabled: false,
     //      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        }
      }
    },


        series: [{
          name: 'Dispo',
          data: []
        }]
       };
   }



   saveInstance(chartInstance) {
    this.chart = chartInstance;
 //   console.log(chartInstance);
}

   public ngOnInit () {
    this.dataSubscription = 
this.userService3.getData().subscribe((data) => {
      this.options.series[0].data = data.data.operating_rate;
     console.log(data);
   });
}
    public ngOnDestroy() {
      if (this.dataSubscription){
this.dataSubscription.unsubscribe();
}
}
}

круговая диаграмма.html:

  <chart [options]="options" (load)="saveInstance($event.context)">

часть моего Json: {"status":"OK","data": {"operating_rate":88.14,"operating_duration":"20h02mn", "unoperating_durati on":"2h40mn","operation_details":[[1497837618 ,0],[1497837738,0], [1497837858,0],[1497837978,0],[1497838098,0],[1497838218,0], [1497838338,0],[1497838458,0],[1497838578,0 ],[1497838698,0], [1497838818,0],[1497838938,0],[1497839058,0],[1497839178,0], [1497839298,0],[1497839418,0],[1497839538,0], [1497839658,0], [1497839778,0],[1497839898,0],[1497840018,0]]}

Вот мой сервис.тс:

   getData() {

     const tick3$ = Observable.timer(100, 60000);

     return tick3$.flatMap(() => this.http.get(usersURL)).map(res => 
res.json());   // .publishBehavior(<User3[]>[]).refCount();



 } 

  • В чем ваша проблема/вопрос? 28.06.2017
  • @Raven, мой вопрос заключается в том, как ввести операцию_скорость в мою диаграмму (88.14) 28.06.2017

Ответы:


1

Я полагаю, вы хотите что-то вроде

// series data of your highcharts options
this.options.series[0].data = [
    {
        name: 'Operating Duration',
        y: data.data.operating_rate // this is the response from your json call
    },
    {
        name: 'Non-Operating Duration',
        y: 100 - data.data.operating_rate
    }
];

согласно документации highcharts http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-basic/

28.06.2017
  • привет мой друг как дела? Я заставил его работать в конце в прошлый раз :) так что теперь это просто пирог, но y: 100 - res.data.operating_rate не работает, он говорит, что я не могу найти «res» 28.06.2017
  • @EmileCantero Я в порядке! Можете ли вы опубликовать свой код, где вы получаете res? 28.06.2017
  • @EmileCantero Я обновил свой ответ, чтобы использовать данные вместо разрешения. вы используете данные вместо res в обратном вызове подписки. 28.06.2017
  • серия: [{ имя: 'Dispo', данные: [ ===> Должен ли я разместить здесь ваш код? ] }] 28.06.2017
  • @EmileCantero правильно! это скажет highcharts, что отображать в круговой диаграмме 28.06.2017
  • Ваш код выглядит великолепно, но я все еще получаю сообщение об ошибке с dat (выделено красным) ===› [ts] Не удается найти имя «данные». Вы имели в виду член экземпляра this.data? 28.06.2017
  • Давайте продолжим обсуждение в чате. 28.06.2017
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..