Angular完整项目开发13 - 使用图表（ng2-charts+chart.js）

Angular项目原型的主体功能差不多了，接下来添加一些其他功能，从图表开始。

图表的库有多种选择，我选了ng2-chart，这名字听上去就是给Angular御用的，虽然实际做下来发现坑不少。

1.安装ng2-charts和chart.js

这一步巨坑，如果直接安装，默认会用最新版本，然后各种报错，折腾了三个晚上。最后发现居然是版本不兼容，所以只能指定版本安装。坑！

npm install ng2-charts@2.3.0 --save
npm install chart.js@2.9.3 --save
npm install chartjs-plugin-datalabels --save //显示图表中的数值

2.引用chart与组织数据

app.module.ts

import { ChartsModule } from 'ng2-charts';
...
imports: [...ChartsModule
]

stat.component.ts 其中涉及到data label的部分（chartjs-plugin-datalabels），不能直接用ng2-charts的官方demo，要修改写法，如下。又折腾了两个小时。坑！

import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label, Color } from 'ng2-charts';
/*注意，下面datalabel的引用和ng2-charts官方例子写法不一样，不能用花括号。这里的 pluginDataLabels是随便起的名字，改成ABC都可以。*/
import  pluginDataLabels  from 'chartjs-plugin-datalabels';
//import  {pluginDataLabels}  from 'chartjs-plugin-datalabels';
...
public barChartOptions: ChartOptions = {responsive: true, scales: {xAxes: [{}],yAxes: [{ticks: {beginAtZero: true}}]},plugins: {datalabels: {anchor: 'end',align: 'end',}}};public barChartLabels: Label[] = ['古里', '碧溪', '支塘', '沙家浜', '虞山', '梅李'];public barChartType: ChartType = 'bar';public barChartLegend = true;public barChartPlugins = [pluginDataLabels]; //显示每一列的数值public barChartColors: Color[] = [{ backgroundColor: '#5DB4EE' } //可放多个颜色]public barChartData: ChartDataSets[] = [{ data: [3, 5, 2, 3, 8, 2], label: '设备数量' } //可放多个系列];

stat.component.html

<div style="display: block;width: 600px; height: 400px;"> <canvas baseChart [datasets]="barChartData"[labels]="barChartLabels"[options]="barChartOptions"[plugins]="barChartPlugins"[colors]="barChartColors"[legend]="barChartLegend"[chartType]="barChartType"></canvas>
</div>

效果：

参考：

https://valor-software.com/ng2-charts/#/BarChart

https://stackoverflow.com/questions/66936633/chart-js-ng2-charts-not-working-on-angular2

Angular完整项目开发13 - 使用图表（ng2-charts+chart.js）相关推荐

java ssm项目经验描述_第一个SSM完整项目开发心得
博主因为打算要考研,所以为了给自己留一手后路.学习了SSM框架.这学期就做了一个完整的SSM项目.(如果考研失败就去外包做一波CRUD boy) 所以边考研边利用业余时间做了一学期,接着期末一周的We ...
前端开发之vue可视化数据图表组件（Chart.js）
前端开发之vue可视化数据图表组件(Chart.js) 前言制作好的效果图 vue2中使用Chart.js 1.在项目中安装Chart.js 组件 2.vue文件 vue3中使用Chart.js v ...
JS组件系列——开源免费图表组件：Chart.js
前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...
全球及中国分散式风电项目开发建设及十四五战略布局分析2021-2027年
全球及中国分散式风电项目开发建设及十四五战略布局分析2021-2027年 HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS-- [修订日期]:2021年11 ...
angular搭建项目步骤_建立健康的Angular项目应采取的步骤
angular搭建项目步骤 by Ashish Gaikwad 通过Ashish Gaikwad 建立健康的Angular项目应采取的步骤 (Steps you should take to buil ...
使用Chart.js创建图表
图表是为应用程序增加最大价值的元素或功能.具有以图形形式显示数据的功能,对于用户读取数据集的百分比非常有帮助. 使用图表有许多优点.包括能够使我们制作的应用看起来更专业.因为原本只是数字的数据看起来更 ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
免费而优秀的图表JS插件、js图表、html图表--百度的Echart、Highcharts、阿里的G2、Chart.js...
免费而优秀的图表JS插件 1.百度的Echart ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如 ...
HTML5——Canvas图表插件 chart.js的基础使用
Canvas图表插件推荐三种比较好用的. chart.js 灵活.可个性化设置图表样式的js图表插件 chartist.js 配置简单,只需要设置数据即可,包是最小的. HighCharts.js ...

Angular完整项目开发13 - 使用图表（ng2-charts+chart.js）

1.安装ng2-charts和chart.js

2.引用chart与组织数据

Angular完整项目开发13 - 使用图表（ng2-charts+chart.js）相关推荐

最新文章

热门文章