Saya ingin meneruskan output API di kanvas piechart dengan sudut tetapi saya tidak dapat mencapai hasil apa pun, API dikonsumsi tetapi saya memiliki masalah mengaitkannya dengan piechart (titik data) kode di bawah ini.

App.component.ts

import { Component, OnInit } from '@angular/core';
import { EmailValidator } from '@angular/forms';
import { Router, NavigationEnd } from '@angular/router';
import { ApiService } from './api.service';
import { ApistatService } from './apistat.service';
import * as CanvasJS from './canvasjs.min';
//var CanvasJS = require('./canvasjs.min');
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  elements: any[];
  constructor(
    private apistatService: ApistatService
  ) {  
    this.elements = [];
  }
    ngOnInit() {
    let chart = new CanvasJS.Chart("chartContainer", {
        theme: "light2",
        animationEnabled: true,
        exportEnabled: true,
        title:{
            text: "Monthly Expense"
        },
        data: [{
            type: "pie",
            showInLegend: true,
            toolTipContent: "<b>{elements.total}</b>: ${y} (#status)",
            indexLabel: "{name} - #percent%",
            dataPoints: [
                
                { y: 120, name: "Insurance" },
                { y: 300, name: "Traveling" },
                { y: 800, name: "Housing" },
                { y: 150, name: "Education" },
                { y: 150, name: "Shopping"},
                { y: 250, name: "Others" }
            ]
        }]
  });   
  this.apistatService.getData().subscribe((data:any) => {
    if(data.status === 200) {
      console.log(data.response);
      this.elements = data.response;
    }
  })    
    chart.render();
    }
}

App.component.html

<div id="chartContainer"  style="height: 370px; width: 100%; margin-left:auto;margin-right:auto;">
  

  
</div>

enter image description here

0
Meriem Bader 22 Juli 2020, 15:52

1 menjawab

Jawaban Terbaik

Untuk menggunakan data API dalam diagram lingkaran, Anda cukup menyetel data dari API ke array dataPoints, pastikan saja data API Anda memiliki format yang sama dengan yang saat ini tersedia di dalam array dataPoints yang Anda lewati dalam array data saat merender diagram, dan itu akan berfungsi.

1
Pritesh 22 Juli 2020, 13:04