时间戳

首页 > 解决方案 > Angular 8：创建自定义水平条形图

angular - Angular 8：创建自定义水平条形图

问题描述

嗨，我需要制作一个自定义水平条形图，如下图所示，但我有点不知道应该如何开始以及应该使用什么库。

特征：

这里有没有人有类似的经验？

真的很感激一些建议。

谢谢！

水平条形图

标签： angularchart.jsangular8

解决方案

您可以使用 ng2-charts 库，它是构建图表的强大库。在这里您可以找到水平条形图的代码示例：https ://stackblitz.com/edit/angular-vpd3ce

线public lineChartType = 'horizontalBar';定义图表的类型。

在 html 部分你应该添加这样的代码：

<canvas baseChart width="400" height="400"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"  -- chart type ('horizontalBar' in your case)
    [plugins]="lineChartPlugins">
  </canvas>

您可以在这里找到完整的文档https://www.chartjs.org/docs/latest/

ng2-charts支持onClick事件。此处示例：https ://valor-software.com/ng2-charts/#/LineChart

推荐阅读