如何在 Angular 中使用 ng2-charts 来使用 Chart.js

这篇具有很好参考价值的文章主要介绍了如何在 Angular 中使用 ng2-charts 来使用 Chart.js。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

Chart.js 是一个流行的 JavaScript 图表库,ng2-charts 是 Angular 2+ 的一个包装器,用于在 Angular 中集成 Chart.js。

在本教程中,您将使用 Chart.js 和 ng2-charts 在 Angular 应用程序中创建示例图表。

先决条件

要完成本教程,您需要:

  • 本地安装了 Node.js,您可以按照《如何安装 Node.js 并创建本地开发环境》中的步骤进行安装。
  • 对设置 Angular 项目和使用 Angular 组件有一定的了解可能会有所帮助。

本教程已使用 Node v14.13.1、npm v6.14.8、angular v10.1.6、chart.js v2.9.4 和 ng2-charts v2.4.2 进行验证。

步骤 1 —— 设置项目

您可以使用 @angular/cli 创建一个新的 Angular 项目。

在您的终端窗口中,使用以下命令:

npx @angular/cli new angular-chartjs-example --style=css --routing=false --skip-tests

这将配置一个新的 Angular 项目,样式设置为 “CSS”(而不是 “Sass”、“Less” 或 “Stylus”),没有路由,并跳过测试。

转到新创建的项目目录:

cd angular-chartjs-example

从项目文件夹中运行以下命令以安装 chart.js

npm install chart.js@2.9.4 ng2-charts@2.4.2

接下来,通过打开您的代码编辑器并修改 angular.json 来将 chart.js 添加到您的 Angular 应用程序中,以包括 Chart.min.js


{
  // ...
  "projects": {
    "angular-chartjs-example": {
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "scripts": [
              "node_modules/chart.js/dist/Chart.min.js"
            ],
            "allowedCommonJsDependencies": [
              "chart.js"
            ]
          },
          // ...
        },
      }
    }},
  // ...
}

然后,打开 app.module.ts 并修改它以导入 ChartsModule


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

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

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

有了这个基本结构,您可以开始创建图表组件。

步骤 2 —— 创建图表组件

让我们从一个示例开始,该示例使用一些选项作为输入来绘制与四个月内三个不同账户相关联的值。

ng2-charts 为您提供了一个 baseChart 指令,可以应用于 HTML canvas 元素。

在代码编辑器中打开 app.component.html 并用以下代码替换内容:


<div style="width: 40%;">
  <canvas
    baseChart
  >
  </canvas>
</div>

然后,修改 canvas 以传入 chartTypelegend


<div style="width: 40%;">
  <canvas
    ...
    [chartType]="'line'"
    [legend]="true"
  >
  </canvas>
</div>
  • chartType:这设置了图表的基本类型。值可以是 piedoughnutbarlinepolarArearadarhorizontalBar
  • legend:一个布尔值,用于指定是否应在图表上方显示图例。

然后,修改 canvas 以传入 datasets


<div style="width: 40%;">
  <canvas
    ...
    [datasets]="chartData"
  >
  </canvas>
</div>

接下来,在代码编辑器中打开 app.component.ts 来定义模板中引用的数组:


// ...
export class AppComponent {
  // ...

  chartData = [
    {
      data: [330, 600, 260, 700],
      label: 'Account A'
    },
    {
      data: [120, 455, 100, 340],
      label: 'Account B'
    },
    {
      data: [45, 67, 800, 500],
      label: 'Account C'
    }
  ];
}
  • datasets:这应该是一个包含数据数组和每个数据集的标签的对象数组。
  • data:或者,如果您的图表很简单,只有一个数据集,您可以使用 data 而不是 datasets,并传入一个数据点数组。

现在,重新打开 app.component.html 并修改 canvas 以传入 labels


<div style="width: 40%;">
  <canvas
    ...
    ="chartLabels"
  >
  </canvas>
</div>

接下来,再次在代码编辑器中打开 app.component.ts 来定义模板中引用的数组:


// ...
export class AppComponent {
  // ...

  chartLabels = [
    'January',
    'February',
    'March',
    'April'
  ];
}
  • labels:X 轴的标签数组。

现在,重新打开 app.component.html 并修改 canvas 以传入 options


<div style="width: 40%;">
  <canvas
    ...
    [options]="chartOptions"
  >
  </canvas>
</div>

接下来,再次在代码编辑器中打开 app.component.ts 来定义模板中引用的对象:


// ...
export class AppComponent {
  // ...

  chartOptions = {
    responsive: true
  };
}
  • options:一个包含图表选项的对象。您可以参考官方 Chart.js 文档了解可用选项的详细信息。

重新编译您的应用程序:

npm start

当在 Web 浏览器中访问您的应用程序(通常是 localhost:4200)时,您将看到一个图表,其中绘制了 Account AAccount BAccount CAprilFebruaryMarchApril 月份的数据:

!示例图表与 ng2-chart

Chart.js 还提供了官方文档中介绍的其他属性和选项。

第三步 — 处理 chartClick 和 chartHover 事件

两个事件被触发,分别是 chartClickchartHover,它们提供了一种方式来响应用户与图表的交互。当前活动的点和标签将作为事件数据的一部分返回。

让我们创建一个示例,将它们添加到画布中。

打开 app.component.html 并添加 chartHoverchartClick

<div style="width: 40%;">
  <canvas
    ...
    (chartHover)="onChartHover(($event)"
    (chartClick)="onChartClick(($event)"
  >
  </canvas>
</div>

打开 app.component.ts 并添加你在模板中引用的自定义函数:

// ...
export class AppComponent {
  // ...

  onChartHover = ($event: any) => {
    window.console.log('onChartHover', $event);
  };

  onChartClick = ($event: any) => {
    window.console.log('onChartClick', $event);
  };
}

重新编译你的应用程序后,你将在开发者工具中观察到 onChartHoveronChartClick 被记录。

第四步 — 动态更新数据集

使用 Chart.js 的一个亮点是能够动态更新或响应从后端或用户输入接收到的数据。

让我们继续基于前面的示例,在 4 个月内绘制 3 个账户值,并为五月份添加新的数据点。

打开 app.component.ts 并定义自定义函数:

// ...
export class AppComponent {
  // ...

  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];
  }
}

如果没有传递数组给 newDataPoint(),则默认值为 [100, 100, 100]

在数据集数组上也没有进行 mutation。使用 Object.assign 返回包含先前数据和新数据的新对象。

然后,在 app.component.html 中,在 canvas 后使用自定义函数在一个 button 中:

<div style="width: 40%;">
  ...

  <button (click)="newDataPoint([900, 50, 300], 'May')">
    添加数据点
  </button>
</div>

重新编译你的应用程序后,当你与 添加数据点 按钮交互时,你将观察到图表将为 五月 月份绘制 A 账户B 账户C 账户 的值。

结论

在本教程中,你使用了 Chart.js 和 ng2-charts 在 Angular 应用程序中创建了一个示例图表。

这些库共同为你提供了以现代和动态的方式呈现数据的能力。文章来源地址https://www.toymoban.com/news/detail-830475.html

到了这里,关于如何在 Angular 中使用 ng2-charts 来使用 Chart.js的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在Blazor中使用Chart.js

    首先,从Chart.js官方网站下载Chart.js库文件。 推荐下载这个构建好的版本https://cdnjs.com/libraries/Chart.js,最新版是 v4.2.1 在Blazor项目中把刚刚下载好的 Chart.js 放到wwwroot目录下。 在Blazor项目中的Pages文件夹下_Host.cshtml文件中添加以下代码: 在Blazor组件中使用Chart.js,需要在组件中

    2023年04月08日
    浏览(34)
  • C# | 使用Chart动态展示实时折线图数据

    实时折线图是展示数据变化趋势的有效方式,可以用于监控系统性能、物理实验、股票走势等多个领域。 在C#中,我们可以使用Chart控件来实现实时折线图的展示,其动态性和可交互性可以帮助用户更好地理解数据。 本文将介绍如何使用Chart控件展示实时折线图数据,希望能

    2023年04月08日
    浏览(37)
  • Chart.js (v2.9.4)--如何像高版本一样支持skipNull

    项目开发中,用到Chart.js展示图表,用起来也非常方便,配置很灵活,很好用,给个数据集,设置一些配置值,实例化一个Chart出来,图表就非常丝滑地展现出来了。 但是作为开发人员都知道的一个真理,永远不变的就是变化,永远无理的都是客户的需求。 很不幸,我就撞到

    2024年02月14日
    浏览(43)
  • C#使用Chart进行统计,切换不同的图表类型

    WindowsForm应用程序中Chart图表控件所属的命名空间: 命名空间: System.Windows.Forms.DataVisualization.Charting 对应的dll路径: C:Program Files (x86)Reference AssembliesMicrosoftFramework.NETFrameworkv4.6.1System.Windows.Forms.DataVisualization.dll ChartDemo,将默认的Form1,重命名为FormChart, 窗体设计器源程序

    2024年02月17日
    浏览(36)
  • Smith-Chart阻抗匹配工具的使用(一)

    一、件下载安装         下载链接:轻量级smith-chart用于阻抗匹配-嵌入式文档类资源-CSDN下载         破解:运行安装包中的破解文件,其中破解文件选择刚才安装文件下可执行文件SMITH.exe 二、简单操作 基本规则 新建一个DATAPOINT,设置为50欧姆 并联电容在该点沿smith圆顺时

    2023年04月24日
    浏览(41)
  • OpenHarmony开发实战:switch、chart组件的使用(JS)

    本篇文章基于switch组件和chart组件,实现线形图、占比图、柱状图,并通过switch切换chart组件数据的动静态显示。要求实现以下功能: 实现静态数据可视化图表。 打开开关,实现静态图切换为动态可视化图表。 相关概念 switch组件:开关选择器,通过开关,开启或关闭某个功

    2024年04月11日
    浏览(78)
  • Flutter最强大的图表库fl_chart的使用

    fl_chart 是Flutter中功能最全、最强大的图表库。在 flutter 中的地位相当于前端的 echarts 、android端的 MPAndroidChart 支持常见的LineChart(折线图)、BarChart(柱状图)、PieChart(饼图)。 库地址:https://pub-web.flutter-io.cn/packages/fl_chart 库文档提供了详细的api说明,但是太过形式主义,全是对参

    2024年02月09日
    浏览(40)
  • vue3的vue-chart组件封装(包含数据刷新按需使用)

    v-chart封装数据更新效果 初始数据展示:  刷新数据展示: v-charts Description https://v-charts.js.org/#/ npm i v-charts echarts -S / yarn add v-charts echarts -S 先别急着直接定义option对象,可以参考官网这个方法: Documentation - Apache ECharts 也就是通过实例,调用setOption这个方法,可以不通过传递

    2024年02月02日
    浏览(44)
  • Devops系列二(使用helm chart,将java应用发布部署至k8s的示例)

    docker镜像已经有了,本文我们将接着演示如何使用helm部署应用到k8s。 分为两大部分: 制作helm chart,推送到私有仓库nexus helm拉取chart,部署到k8s 要求你先安装helm,随便一台linux机器即可,不要求你要有k8s或者docker环境。 这里,我删除了没用到的一些文件,最后保留的见下:

    2024年02月12日
    浏览(46)
  • C#中chart控件

    图表的5大集合 例子 第一步:创建工程 放入chart控件 选择图标类型 选择绘制曲线的宽度和颜色。 显示数据标签 添加标题 调整标题字体:大小和颜色 对坐标轴进行说明 设置间隔 设置刻度 设置游标:具有自动拖拽和放大功能 设置网格线的样式 调整表格的位置 编写代码 结果

    2024年01月23日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包