NG2- chart :如何在typescript中动态设置图表标题
NG2-chart是一个基于Angular框架的图表库，用于在Web应用程序中创建各种类型的图表。在TypeScript中动态设置图表标题可以通过以下步骤实现：
- 首先，确保已经安装了NG2-chart库。可以通过在终端中运行以下命令来安装NG2-chart：
- 首先，确保已经安装了NG2-chart库。可以通过在终端中运行以下命令来安装NG2-chart：
- 在需要使用图表的组件中，导入所需的模块和服务。例如，如果要使用柱状图，可以导入
BarChartComponent和ChartService： - 在需要使用图表的组件中，导入所需的模块和服务。例如，如果要使用柱状图，可以导入
BarChartComponent和ChartService： - 在组件类中，创建一个变量来存储图表的标题。例如，可以创建一个名为
chartTitle的变量： - 在组件类中，创建一个变量来存储图表的标题。例如，可以创建一个名为
chartTitle的变量： - 在组件的HTML模板中，使用
chartTitle变量来动态设置图表的标题。可以通过使用插值表达式或属性绑定来实现。例如，使用插值表达式： - 在组件的HTML模板中，使用
chartTitle变量来动态设置图表的标题。可以通过使用插值表达式或属性绑定来实现。例如，使用插值表达式： - 或者使用属性绑定：
- 或者使用属性绑定：
- 最后，确保在组件类中使用
ChartService来更新图表的标题。可以在需要更新标题的地方调用ChartService的方法。例如，可以在点击按钮时更新标题： - 最后，确保在组件类中使用
ChartService来更新图表的标题。可以在需要更新标题的地方调用ChartService的方法。例如，可以在点击按钮时更新标题：
通过以上步骤，就可以在TypeScript中动态设置NG2-chart图表的标题。请注意，这只是一个示例，具体的实现方式可能因NG2-chart的版本和使用的图表类型而有所不同。关于NG2-chart的更多信息和示例，可以参考腾讯云的相关产品和产品介绍链接地址。
相关·内容
1回答
角12，Typecript 4.2 :类列在NgModule的声明中，但不是指令、组件或管道
javascript、angular、typescript
我把我的应用程序从角度11升级到12，并升级到打字稿4.2.4。当我提供服务时，应用程序无法使用错误进行编译：
error NG6001: The class 'ChartComponent' is listed in the declarations of the NgModule 'PrototypeModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropria
浏览 10提问于2021-12-10得票数 1
2回答
如何使用间隔更新可观察到的数组？
javascript、angular、rxjs、rxjs5
我正在尝试用角2和chart.js (通过and图表)为图表构建一个仪表板。我希望有一个图表数组，每个更新通过一个http请求在一个自定义的间隔。
现在我有三个单独的图表调用，它们将数据推送到数组中。当涉及到下一次迭代时，我遇到了麻烦--如果我再次推入数组，我将得到另外3个图表。我希望数组中的订阅者在间隔发布时使用新数据进行更新。
对于如何为我的用例正确地构造组件/服务/http关系，我有点困惑。我觉得我很接近，但我肯定错过了什么。如何获得间隔/订阅者关系以映射到视图，并在间隔上更新现有图表？任何帮助都会很好！
现在：
服务：
我在这里执行这个间隔：
getSingleChartObsinte
浏览 5提问于2016-10-24得票数 1
回答已采纳
1回答
primeNG图表的问题:找不到模块:错误:无法解决“chart.js/auto”
javascript、angular、typescript、chart.js、primeng
我的PrimeNG图表有问题。
一开始，我的问题是在html中使用选项，我读到如果我下载了2.9.4 chart.js并这样做更好，现在我有了错误:模块未找到:错误:无法解决‘chart.js/ trabajo\Plots\node_modules\primeng\fesm2015’在'D:\Proyectos trabajo\Plots\node_modules\primeng\fesm2015‘中
我读到它与导入v2的方式有关，但我不理解正确的方法，我试图使用以下方法：
import Chart from 'chart.js';
但我在“chart.js”中有一个
浏览 4提问于2022-01-07得票数 4
1回答
如何在茉莉花中进行单元测试语句'chart.chart.update()‘？
angular、jasmine、chart.js
我有一个角4应用程序，我正在使用angular2-chartjs来绘制我的应用程序中的图表。
在组件中，我导入了以下内容：
import { ChartComponent } from 'angular2-chartjs';
import { ChartModule } from 'angular2-chartjs';
创建图表属性：
@ViewChild(ChartComponent) chart: ChartComponent;
现在，我将这个图表对象从组件中传递给服务的方法：
this.chartService.updateChartWith(this.c
浏览 0提问于2018-10-23得票数 4
回答已采纳
1回答
Nativescript -图表未显示
nativescript、nativescript-angular
我遵循nativescript-ui-samples-angular ，在运行应用程序时可以看到图表。当我在我的应用程序中使用相同的代码时，IOS和Android上没有显示图表。我不知道出了什么问题。我是否错过了某些配置？谢谢
chart.component.html
<RadCartesianChart tkExampleTitle tkToggleNavButton>
<CategoricalAxis tkCartesianHorizontalAxis lastLabelVisibility="Hidden" ios:firstLabelVisib
浏览 5提问于2019-07-29得票数 1
回答已采纳
3回答
角-cli RC 5在app.module.ts中添加多个组件
angular、angular-cli、angular-components、angular-rc5
在我的角-cli RC5项目中，我试图创建图表。
创建了一个新组件为“图表”
创建了一个指令，名为"line-graph.directive.ts“
文件夹结构
app.module.ts
import {NgModule, enableProdMode} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component'
浏览 5提问于2016-09-05得票数 1
1回答
角2分量库
angular、npm
我正在尝试创建一个组件库，我可以通过npm与任何人共享。我正在用webpack构建组件库。当我试图将组件库安装到一个Range2项目的模块中时，该项目的模块不识别我的组件库模块的名称。
在我的应用程序中我这样做..。
import '@angular/core';
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
//it says it does not recognize
浏览 2提问于2016-12-15得票数 4
回答已采纳
1回答
我想用复选框绑定图例选项(显示图例与否)
angular、chart.js
我希望图例在图表下面(位置:左下角)，我想用复选框绑定图例选项(显示图例与否)。我怎么能这么做？
TypeScript:
import { Component } from '@angular/core';
@Component({
selector: 'chart',
templateUrl: './chart.component.html'
})
export class chartComponent {
public chartOptions:any = {
legend: { position: 'bott
浏览 2提问于2017-03-24得票数 0
回答已采纳
3回答
Angular2，ng2-父图表之前的子级渲染
typescript、angular、ng2-charts
我目前正在使用Angular2和TypeScript为frontend开发可视化应用程序，为backend开发Spring-Boot应用程序。现在，来自backend的数据必须显示在我的ng2-chart组件中。
我将数据加载到父组件的ngOnInit()函数中。数据被推送到两个数组中，它们作为我的子组件的输入，如下所示：
ngOnInit() {
this._sqlService.getCubeErrors().subscribe(
data => {
for (var i = 0; i < data.length; i++) {
浏览 7提问于2016-08-01得票数 0
回答已采纳
2回答
如何将C3量规图集成到角5中？
javascript、angular、c3.js
我试图将C3规范图：集成到一个新的角度5应用程序中。
下面是我的代码chart.component.ts：
import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as c3 from 'c3';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css&
浏览 1提问于2018-04-24得票数 3
回答已采纳
1回答
我得到了这个错误，但我不能弄清楚，我是不是遗漏了什么？
angular、frontend、mean-stack
我正在遵循这个article来处理angular中的图表。即使一步一步地跟踪它，我仍然会得到这个错误。有没有人能给我解释一下这个错误是什么，为什么会发生？ 我的app.component.ts： import { Component } from '@angular/core';
import {
ChartComponent,
ApexAxisChartSeries,
ApexChart,
ApexXAxis,
ApexTitleSubtitle
} from "ng-apexcharts";
export type ChartO
浏览 32提问于2021-06-30得票数 0
回答已采纳
3回答
如何在angular2中将子组件值获取到父组件。最好的方法是什么？
angular、typescript
我有子组件(日历)和父组件(表单)。我必须选择日历中的值，并且我想访问表单组件中的值。
我如何才能以最好的方式实现这一点？
子Component.ts：
import {
Component,
OnInit,
ViewChild,
Input
} from '@angular/core';
@Component({
selector: 'calendar',
template: '
<md2-datepicker name="mindate"
placeh
浏览 0提问于2017-08-08得票数 10
1回答
不能绑定到“属性”，因为它不是“cmp”的已知属性
angular
我有以下组件和模块：
ChartComponent
@Component({
moduleId: module.id,
selector: 'chart-cmp',
template: ''
})
export class ChartComponent implements OnChanges {
@Input
typeId : string;
@Input
username : string;
@Input
grain : str
浏览 1提问于2016-09-26得票数 1
回答已采纳
1回答
角2的高级图表-在ChartComponent上没有指示注释
javascript、angularjs、twitter-bootstrap、highcharts、angular
我正试图获得关于角2的高图表来处理我的项目。但是，当我将CHART_DIRECTIVES添加到directives数组中的@Component中时，我在浏览器控制台中得到了错误：
例外:错误:未知(承诺)：没有在ChartComponent上找到任何指令注释
有人知道这意味着什么吗?如何解决这个问题？？
编辑：，我正在尝试合并这个图表包：。我按照该站点上的说明添加了CHART_DIRECTIVES：
import {Http, Headers, Response, HTTP_PROVIDERS} from 'angular2/http';
import {Compone
浏览 2提问于2016-05-23得票数 0
回答已采纳
1回答
Angular dynamic highchart集成-在图表组件中未更新响应
angular、highcharts
我已经用angular集成了一个简单的高线图。数据来自本地创建的以下模拟json。
{
"title": "Mothly Average RainFall",
"subtitle": "Source: WorldClimate.com"
}
下面是我的图表组件
import { Component, OnInit, AfterContentInit, OnDestroy, ViewChild,
ElementRef } from '@angular/core';
import { chart } from
浏览 0提问于2018-06-06得票数 0
1回答
将我的图表最小yaxis设置为0
html、angular、chart.js、ng2-charts
我使用的是构建在chartjs上的ng2charts (我想)。我想要将y轴设置为从一个特定值开始。我该怎么做呢？动态的typescript将是伟大的，硬编码在HTML中可以接受。
我的图表组件html
<div>
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabel"
[options]=&#
浏览 0提问于2017-04-21得票数 1
1回答
Angular2-chartjs/chartjs-plugin-注释更新选项仅一次
javascript、angular、charts、highcharts
我用angualr2-chartjs来显示图表。我的问题是，当我动态地改变选项时，图表更新只是一次。在控制台中，我看到一切都是好的，但在我看来，我看不到变化。我使用chartjs-plugin-注释，当我单击按钮时，我希望更改注释类型："line“值动态。
我的配置app.component.ts：
import { Component,ViewChild,ChangeDetectorRef } from '@angular/core';
import { ChartComponent } from 'angular2-chartjs';
import
浏览 0提问于2017-09-21得票数 3
回答已采纳
2回答
角2从一个子模块调用子选择器到子模块
angular、components、angular2-template、typescript2.0、angular2-modules
我的目录结构为：
|-resources
|-views
|-Typescript
|-App
|-app.module.ts
|-app.component.ts
|-Modules
|-Core
|-Assets
|-Typescript
|-core.module.ts
|-core.component.ts
|-Category
|-Assets
|-Typescript
浏览 1提问于2016-11-29得票数 0
回答已采纳
1回答
角2 @ViewChild不工作。无法读取未定义的属性“标题”
angular、typescript、viewchild
即使在使用@ViewChild导入之后，我也无法访问组件的属性。下面是密码。
header.monitor.component.ts
import { AdminComponent } from 'admin/admin.component';
import { Component } from '@angular/core';
import { ViewChild, AfterViewInit } from '@angular/core';
@Component({
selector: 'monitor-header'
浏览 0提问于2017-11-29得票数 2
回答已采纳
3回答
在Angular 9中，如何在不重新实例化组件的情况下更新组件的数据字段以在DOM中显示？
javascript、angular、typescript
我是Angular 9的新手，我有一个程序，用户在这个程序中输入一个名字-提交后，发送一个POST HTTP请求并存储名字。然后，我有一个子头的不相关组件，它列出了使用ngOnInit()的GET HTTP请求存储的名称。但是，我需要该子标题在每次输入新列表时动态更新该名称列表，而不仅仅是在组件实例化时更新。
我不确定该如何继续。我肯定我可以简单地添加一个按钮来获取和更新上述列表，但尝试更动态的东西。提前感谢！
//SERVICE.TS...
import { Injectable } from '@angular/core';
import { HttpClient } f
浏览 0提问于2020-06-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
