热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ng2-charts更新标签和数据

如何解决《ng2-charts更新标签和数据》经验,为你挑选了4个好方法。

我正在尝试使用ng2-chart动态创建图表,我从角度2服务获取信息,当我仅更改图表的标签时它工作,当我更改数据时它只能工作,但当我更改两者时,只更新数据在图表中.对这种奇怪的行为有任何解释.

我的模板:



我的课 :

export class PlDoughnutComponent implements OnInit {

  constructor(private homeService: TileServiceService) { }

  ngOnInit() {
    this.updatePLdoughnut();

  }

  public util : UtilService = new UtilService();
  public doughnutChartLabels:string[] = ['Download Sales'];
  public doughnutChartData:number[] = [0,0,100];
  public doughnutChartType:string = 'doughnut';

  public updatePLdoughnut(){

    this.homeService.getTile().
    then(res => {

      this.doughnutChartLabels =  res.PLtypes;
      this.doughnutChartData = this.util.objectToIntArray(res.PLByTypes);

    })
  }
}

Sleeper9.. 42

显然,如果你不修改标签数组的原始引用,它似乎工作,至少对我来说.我的意思是,如果你想要一套完全不同的标签,你应该这样做:

在模板中:


在ts组件中:

this.lineChartLabels.length = 0;
for (let i = tempLabels.length - 1; i >= 0; i--) {
  this.lineChartLabels.push(tempLabels[i]);
}

或者,使用新的ECMAScript语法:

this.lineChartLabels.length = 0;
this.lineChartLabels.push(...tempLabels);

关键可能是this.lineChartLabels.length = 0;语句,它通过将其长度设置为0来实际"清空"数组,而无需修改引用.希望这可以帮助!



1> Sleeper9..:

显然,如果你不修改标签数组的原始引用,它似乎工作,至少对我来说.我的意思是,如果你想要一套完全不同的标签,你应该这样做:

在模板中:


在ts组件中:

this.lineChartLabels.length = 0;
for (let i = tempLabels.length - 1; i >= 0; i--) {
  this.lineChartLabels.push(tempLabels[i]);
}

或者,使用新的ECMAScript语法:

this.lineChartLabels.length = 0;
this.lineChartLabels.push(...tempLabels);

关键可能是this.lineChartLabels.length = 0;语句,它通过将其长度设置为0来实际"清空"数组,而无需修改引用.希望这可以帮助!


这个答案对我有用

2> 小智..:

最近我不得不使用ng2-charts,我在更新数据时遇到了很大的问题,直到我发现这个解决方案:

在这里我的组件:

import { Component, OnInit, Pipe, ViewChild, ElementRef } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts/ng2-charts';

@Component({
    moduleId: module.id,
    selector: 'product-detail',
    templateUrl: 'product-detail.component.html'
})

export class ProductDetailComponent {
    @ViewChild(BaseChartDirective) chart: BaseChartDirective;

    private datasets_lines: { label: string, backgroundColor: string, borderColor: string, data: Array }[] = [
        {
        label: "Quantities",
        data: Array()
    }
];

private labels_line = Array();

private optiOns= {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
};


constructor() { }
ngOnInit() {

    this.getStats();

}
getStats() {

    this._statsService.getStatistics(this.startDate, this.endDate, 'comparaison')
        .subscribe(
        res => {
            console.log('getStats success');
            this.stats = res;

            this.labels_line = this.getDates();
            this.datasets_lines = [];

            let arr: any[];
            arr = [];
            for (let stat of this.stats) {
                arr.push(stat.quantity);
            }

            this.datasets_lines.push({
                label: 'title',
                data: arr
            });

            this.refresh_chart();

        },
        err => {
            console.log("getStats failed from component");
        },
        () => {
            console.log('getStats finished');
        });
}

refresh_chart() {
    setTimeout(() => {
        console.log(this.datasets_lines_copy);
        console.log(this.datasets_lines);
        if (this.chart && this.chart.chart && this.chart.chart.config) {
            this.chart.chart.config.data.labels = this.labels_line;
            this.chart.chart.config.data.datasets = this.datasets_lines;
            this.chart.chart.update();
        }
    });
}

getDates() {
    let dateArray: string[] = [];
    let currentDate: Date = new Date();
    currentDate.setTime(this.startDate.getTime());
    let pushed: string;
    for (let i = 1; i 

我确定这是正确的方法,并希望这将是有益的



3> 小智..:

就像Deyd之前指出的那样,这是由Angular 2 +的变化检测和ng2-charts中的错误组合引起的.

根据我自己的观察(如果我错了,请纠正我),Angular会在很短的时间内将几个变化合并到一个集合(changes: SimpleChanges)中ngOnChanges.

不幸的是,ng2-charts只检查数据集是否已使用此集合进行更改并更新它.否则它会完全重建整个图表.但是,由于更改检测的工作方式,可能会更改多个属性.然后,即使标签和可能的其他属性也已更新,只有数据集才会更新.参见ngOnChangesng2-charts:valor- software/ng2-charts/src/charts/charts.ts

如果您不想在应用程序中单独复制ng2-charts并自行解决问题,则此问题的可能解决方法是使用Javascript的内置函数设置数据集的延迟很短setTimeout(callback: () => void, delay: number).

之前:

@Component({
  selector: 'app-root',
  template: `
  

  
  
  `
})
export class AppComponent implements OnInit {
  chartData: string[];
  chartLabels: string[];
  chartColors: string[];

  onChange(id: string) {
    getFromApiById(id)
      .then(result => this._setChart(result.data, result.labels, result.colors));
  }

  private _setChart(data: string[], labels: string[], colors: string[]) {
    this.chartData = data;
    this.chartLabels = labels;
    this.chartColors = colors;
  }
}

后:

@Component({
  selector: 'app-root',
  template: `
  

  
  
  `
})
export class AppComponent implements OnInit {
  chartData: string[];
  chartLabels: string[];
  chartColors: string[];

  onChange(id: string) {
    getFromApiById(id)
      .then(result => this._setChart(result.data, result.labels, result.colors));
  }

  private _setChart(data: string[], labels: string[], colors: string[]) {
    this.chartLabels = labels;
    this.chartColors = colors;

    setTimeout(() => {
      this.chartData = data;
    }, 50);
  }
}



4> 小智..:

使用BaseChartDirective我做了图表更新,它达到了目的.以下示例:

import { BaseChartDirective } from 'ng2-charts/ng2-charts';

在课堂内添加如下

@ViewChild(BaseChartDirective) chart: BaseChartDirective;

当您要更改值时,请添加如下

setTimeout(() => {
if (this.chart && this.chart.chart && this.chart.chart.config) {
  this.chart.chart.config.data.labels = this.labels_pie;
  this.chart.chart.update();
}
});


推荐阅读
  • 本文深入探讨了 `ExpressionChangedAfterItHasBeenCheckedError` 错误的原因及其解决方案。通过分析 Angular 的变更检测机制,详细解释了该错误的发生条件,并提供了多种有效的应对策略,帮助开发者在实际开发中避免这一常见问题。 ... [详细]
  • 在Java应用中实现只读模式的切换方法与技巧 ... [详细]
  • 从 Java 过渡到 Ruby,不仅是一次编程语言的转换,更是一段技术进阶的旅程。本文将深入探讨两种语言在语法、生态系统和开发模式上的差异,帮助开发者顺利实现转型,并在新的环境中高效地编写高质量代码。 ... [详细]
  • MongoDB Aggregates.group() 方法详解与编程实例 ... [详细]
  • voc生成xml 代码
    目录 lxmlwindows安装 读取示例 可视化 生成示例 上面是代码,下面有调用示例 api调用代码,其实只有几行:这个生成代码也很简 ... [详细]
  • 本文深入探讨了IO复用技术的原理与实现,重点分析了其在解决C10K问题中的关键作用。IO复用技术允许单个进程同时管理多个IO对象,如文件、套接字和管道等,通过系统调用如`select`、`poll`和`epoll`,高效地处理大量并发连接。文章详细介绍了这些技术的工作机制,并结合实际案例,展示了它们在高并发场景下的应用效果。 ... [详细]
  • 本文探讨了使用JavaScript实现多种经典排序算法的高效方法,包括冒泡排序、选择排序、插入排序、归并排序和快速排序。为了确保代码的结构清晰和可维护性,我们首先定义了一个 `ArrayList` 类,该类中包含了待排序的数组声明。通过这种方式,我们不仅能够更好地组织代码,还能提高算法的执行效率和可读性。此外,我们还对每种排序算法进行了详细的性能分析和优化建议,以帮助开发者在实际应用中选择最合适的排序方法。 ... [详细]
  • 提升Python多环境管理效率:深入探索多Python Pip应用策略
    提升Python多环境管理效率:深入探索多Python Pip应用策略 ... [详细]
  • 开发技巧分享:利用套索与矩形选择工具高效选取绘图中的全部字形节点
    开发技巧分享:利用套索与矩形选择工具高效选取绘图中的全部字形节点 ... [详细]
  • 本文详细解析了如何使用 jQuery 实现一个在浏览器地址栏运行的射击游戏。通过源代码分析,展示了关键的 JavaScript 技术和实现方法,并提供了在线演示链接供读者参考。此外,还介绍了如何在 Visual Studio Code 中进行开发和调试,为开发者提供了实用的技巧和建议。 ... [详细]
  • Java队列机制深度解析与应用指南
    Java队列机制在并发编程中扮演着重要角色。本文深入解析了Java队列的各种实现类及其应用场景,包括`LinkedList`、`ArrayBlockingQueue`和`PriorityQueue`等,并探讨了它们在高并发环境下的性能表现和适用场景。通过详细分析这些队列的内部机制和使用技巧,帮助开发者更好地理解和应用Java队列,提升系统的设计和架构能力。 ... [详细]
  • MVVM架构~mvc,mvp,mvvm大话开篇
    返回目录百度百科的定义:MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方:ControllerPresenter负责逻辑的处理,Model提供数据,View负责显示。作为一种新的模 ... [详细]
  • 开发心得:利用 Redis 构建分布式系统的轻量级协调机制
    开发心得:利用 Redis 构建分布式系统的轻量级协调机制 ... [详细]
  • PyQt5 QTextEdit:深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定,提供了超过 620 个类和 6000 个函数及方法,广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件,支持丰富的文本编辑功能,如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能,还在于其易用性和灵活性,使其成为开发复杂用户界面的理想选择。 ... [详细]
  • 本文深入探讨了 CF570D 问题中树的请求处理方法,重点分析了长链剖分技术的应用与优化。题目涉及一棵包含 n 个节点的树,每个节点上有一个字符。每次查询时,需要处理某个节点 x 的相关请求。通过长链剖分技术,可以高效地解决这类问题,显著提升算法性能。本文不仅介绍了基本的长链剖分原理,还详细讨论了其在具体实现中的优化技巧,为解决类似问题提供了宝贵的参考。 ... [详细]
author-avatar
风一样的梦
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有