创建多个动态图表

2023-12-22

我正在开发一个网络应用程序 - MEAN stack。我正在尝试使用 ChartJS 圆环图,但我需要它完全动态 - 首先,图表的数量是动态的(每个图表代表其他东西),所以有时它会是 3 个,有时是 20 个。第二,我希望我能够访问每个图表以进行实时数据更改。这可能吗?我尝试创建一个数组来保存每个图表数据,并使用 *ngFor 创建每个图表的画布元素,但它不起作用。

我的chartjs.component.ts:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Chart } from 'chart.js';
import { pieceLabel } from 'chart.piecelabel.js';
import {ElementRef} from '@angular/core';
@Component({
selector: 'app-chartjs',
templateUrl: './chartjs.component.html',
styleUrls: ['./chartjs.component.css']
})
export class ChartjsComponent implements OnInit {
constructor( private _dataService : DataService, private elementRef: ElementRef) { 

}
jsons: any;
NumberOfSystems: Number;
charts = [];
ngOnInit() {
this._dataService.getData().subscribe(data => {
  this.jsons = data
  this.NumberOfSystems = this.jsons.data[0][1].systems.length
  this.createChartsData()
}); 
}
createChartsData()
{
var array=[];
for(var i =0; i<this.NumberOfSystems;i++)
{
var pie ={
  type: 'doughnut',
  data: {
    labels: ["Disks", "Mgmt", "Hardware", "FC", "Vols&Pols"],
    datasets: [
      {
        backgroundColor:["#008000","#008000","#008000","#008000","#008000"],
        data: [20,20,20,20,20]
      }
    ]
  },
  options: {
    title: {
      display: false
    },
    animations: true,
    tooltips: {
      enabled: true
     },
     legend: {
      display: true
    }
  }
};
array.push(pie);
}
this.createCharts(array);
}
createCharts(pieData){
for(var j = 0; j<this.NumberOfSystems;j++)
{
  let htmlRef = this.elementRef.nativeElement.select(`#canvas`+j);
  console.log(htmlRef);
  var tempChart = new Chart(htmlRef,pieData[j]);
  this.charts.push(tempChart);
}   
}
}

这是Chartjs.component.html:

<div>
<canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}}">{{charts}}</canvas>
</div>

在此状态下,ElementRef 为 null。


In your

画布...添加#yourId

(例如:canvas *ngFor =“让图表图表;让i =索引”id =“canvas{{i}}#yourId”)

然后你可以使用 @ViewChildren('yourId') myCharts: any; (你不能在 ngOnInit 中使用 myCharts,只能在 ngAfterViewInit 及之后使用)这将为你提供图表数组。

我不会提供更多详细信息,但您可以使用 myCharts 中的内容(使用 console.log(myCharts) 详细查看其中的内容),您可以使用它来更改数据等。

希望这可以帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

创建多个动态图表 的相关文章

随机推荐

  • 下载文件时显示“请稍候”消息或进度条

    我使用以下 WordPress 管理员通知来提示用户下载一些文件 我想在下载文件时包含一个进度条或至少包含一个 正在下载 请稍候 消息 有任何想法吗 我已经尝试了几种 jQuery 解决方案 但没有任何效果 对于 jQuery 我完全是个菜
  • 非静态字段、方法或属性需要对象引用吗?

    我知道这可能是一个非常新的问题 所以我很抱歉 我正在尝试从另一个表单 MaxScore 访问 Form1 上标签的 Text 属性 当我单击 MaxScore 上的 确定 按钮时 我想使用 max ToString 将 Form1 的 my
  • 如何直接从我的服务器将视频上传到 Youtube?

    我正在设置一个 无头 网络服务器 让人们可以制作自己的自定义延时电影 有几个人想将他们制作的延时视频上传到 YouTube 与其将视频下载到该人的笔记本电脑上 然后该人手动将其上传到 YouTube 有没有一种方法可以在我的网络服务器上编写
  • 配方/成分/测量/数量的数据库架构

    我正在创建一个食谱应用程序来帮助我妻子实现她的蛋糕爱好 这个想法是创建一个食谱数据库来保存她所有的蛋糕食谱 每个食谱都有多种成分 每种成分都有一个测量值 克 毫升 茶匙等 然后是数量 我了解如何创建 食谱 和 成分 表 以及如何将这两个表与
  • 按降序对 int 数组进行排序[重复]

    这个问题在这里已经有答案了 可能的重复 按降序对基本类型数组进行排序 https stackoverflow com questions 215271 sort arrays of primitive types in descending
  • 使用 Hangout api 进行视频通话 [已关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 你好 我有一个 Android 应用程序 我想要其中的视频聊天功能 我在互联网上搜索了很多 但找不到任何有效且简单的解决方案 然后我找
  • 如何通过切换(“慢”)使其更平滑

    我有以下代码可以工作 但在每个切换操作结束时它变得有点跳动 如果我切换段落会更流畅吗 我正在尝试获取该段落 但我不知道该怎么做 div div class toppara p Conte p div div
  • 从 Express 中间件中排除路由

    我有一个节点应用程序 就像防火墙 调度程序一样位于其他微服务前面 它使用如下所示的中间件链 app use app lookup app use timestamp validator app use request body app us
  • 如何在验证消息 Laravel 5.2 中获取数组索引

    我放入的这些数组Laravel Validator作为参数 item gt string rules item string gt Item number index is not string messages 我希望有index num
  • 如何使用 Spring Boot 注册 servlet?

    这段代码不起作用 我有一个 web xml 需要翻译成 spring boot
  • 300GB Postgis 表索引速度慢

    我正在将大约 300GB 的等高线数据加载到 postgis 表中 为了加快这个过程 我读到首先加载数据 然后创建索引是最快的 加载数据只花了大约2天的时间 但现在我已经等待索引大约30天了 它仍然没有准备好 查询是 create inde
  • 如何使用 React Native Agora 显示传入视频通话

    我想在我的 React Native 应用程序中添加实时通话功能 我正在使用agora和socket io来使其实时 并且当应用程序位于前台时它工作正常 但是当应用程序关闭时我被卡住了 因为应用程序关闭时套接字不起作用我想像来电屏幕一样显示
  • 您可以将图像分配给 border-right 吗?

    我正在 html 和 css 中制作一个导航菜单 但我希望每个导航项的右侧边框是一个图像 I tried border right url image jpg 但这没有用 我该怎么做 您可以使用背景图像 然后将背景图像放置在每个元素的右侧
  • 在java中,除了遵循if-else梯子之外,还有什么更好的选择呢?

    情况 我正在检查文件名 文件名存储在String变量称为str并根据入住条件if语句我正在设置一个名为的变量的值mailType if str contains template if str contains unsupported ma
  • Java -> Scala,集合上的性能

    在Java中 根据集合的用法 我们不使用相同的实现 即ArrayList vs LinkedList 来自 Java 背景 有人可以告诉我关于 Scala 集合和性能注意事项我应该了解什么吗 看来 Scala List 的不可变版本是某种不
  • 在 Angular 中的兄弟组件之间传递数据

    Above image depicts my Angular 2 application Main component has two child components FromComponent and ToComponent FromC
  • 通过 PubSubHubbub 推送新直播的通知

    我希望收到有关 YouTube 频道的新直播的通知 如中所述YouTube v3 推送通知 https developers google com youtube v3 guides push notifications我已经设置了一个公共
  • 在 MATLAB 中向量化线性方程组的解

    Summary 本问题涉及线性回归计算算法的改进 我有一个 3D dlMAT 表示在不同曝光时间拍摄的同一场景的单色照片的数组 向量IT 从数学上讲 沿第三维的每个向量dlMAT代表需要解决的单独线性回归问题 需要估计其系数的方程的形式为
  • 为什么 * 不被视为数学符号? [复制]

    这个问题在这里已经有答案了 我正在回答这个question https stackoverflow com questions 39515852 what exactly is classified as a symbol in c 395
  • 创建多个动态图表

    我正在开发一个网络应用程序 MEAN stack 我正在尝试使用 ChartJS 圆环图 但我需要它完全动态 首先 图表的数量是动态的 每个图表代表其他东西 所以有时它会是 3 个 有时是 20 个 第二 我希望我能够访问每个图表以进行实时