在 Angular 中使用Chart.js 和 ng2-charts的示例代码

2023-09-26 08:26:06 357

Chart.js是一个流行的JavaScript图表库，ng2图表是Angular2+的包装器，可以轻松地将Chart.js集成到Angular中。我们来看看基本用法。

安装

首先，在项目中安装Chart.js和ng2-charts:

#Yarn:
$yarnaddng2-chartschart.js

#ornpm
$npminstallng2-chartscharts.js--save

当然，如果你是使用AngularCLI构建的项目，你也可以很容易的添加Chart.js添加.angular-cli.json配置文件中，以便将它与应用绑定在一直：

//:.angular-cli.json(partial)
"script":[
"../node_modules/chart.js/dist/Chart.min.js"
]

现在，你需要在你的app模块或功能模块导入ng2-charts的ChartsModule:

//:app.module.ts

import{BrowserModule}from'@angular/platform-browser';
import{NgModule}from'@angular/core';
import{ChartsModule}from'@angular/charts';

import{AppComponent}from'./app.component';

@NgModule({
declarations:[AppComponent],
imports:[
BrowserModule,
ChartsModule
],
providers:[],
bootstrap:[AppComponent]
})
exportclassAppModule{}

使用

ng2-charts给我们提供了一个可以应用于HTMLcanvas元素的baseChart指令。以下是一个示例，其中显示了一些用于输入的选项以及该指令输出的chartClick事件：

//:app.component.html

这就是组件类现在的样子：

//:app.component.ts

import{Component}from'@angular/core';

@Component({...})
exportclassAppComponent{
chartOptions={
responsive:true
};

chartData=[
{data:[330,600,260,700],label:'AccountA'},
{data:[120,455,100,340],label:'AccountB'},
{data:[45,67,800,500],label:'AccountC'}
];

chartLabels=['January','February','Mars','April'];

onChartClick(event){
console.log(event);
}
}

选项

以下就是不同的可选输入项：

chartType

设置图表的基本类型,值可以是pipe，doughnut，bar，line，polarArea，radar或horizontalBar。

legend

一个布尔值，用于是否在图表上方显示图例。

datasets

包含数据数组和每个数据集标签的对象数组。

data

如果你的图表很简单，只有一个数据集，你可以使用data而不是datasets。

labels

x轴的标签集合

options

包含图表选项的对象。有关可用选项的详细信息，请参阅官方Chart.js文档。

在上面的例子中，我们将图表设置为自适应模式，根据视口大小进行自动调整。

colors

在上面的例子中未显示，但你可以定义自己的颜色，传入包含以下值的对象文字数组：

myColors=[
{
backgroundColor:'rgba(103,58,183,.1)',
borderColor:'rgb(103,58,183)',
pointBackgroundColor:'rgb(103,58,183)',
pointBorderColor:'#fff',
pointHoverBackgroundColor:'#fff',
pointHoverBorderColor:'rgba(103,58,183,.8)'
},
//...colorsforadditionaldatasets
];

使用自定义颜色时，必须为每个数据集提供一个颜色对象字面量。

事件

发出两个事件，chartClick和chartHover，它们允许对与图表交互的用户做出反应。当前活动点和标签作为发射事件数据的一部分返回。

动态更新数据集

当然，Chart.js的优点在于，您的图表可以轻松地通过动态更新/响应从后端或用户输入的数据。

下面这个示例中，我们为5月份添加了一个新的数据集合：

//:app.component.ts(partial)

newDataPoint(dataArr=[100,100,100],label){

this.chartData.forEach((dataset,index)=>{
this.chartData[index]=Object.assign({},this.chartData[index],{
data:[...this.chartData[index].data,dataArr[index]]
});
});

this.chartLabels=[...this.chartLabels,label];

}

它可以像这样使用：

//:app.component.html(partial)


Adddatapoint

你可能注意到了，我们不会对图表的数据集进行改动，而是使用新数据返回包含先前数据的新对象。Object.assign可以很容易地做到这一点。

在这个特定的例子中，如果没有提供参数时，我们为3个数据集设定了默认值为100。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

在 Angular 中使用Chart.js 和 ng2-charts的示例代码

热门推荐

随机推荐