Angular 角度2水平叠加图_Angular_Charts

Angular 角度2水平叠加图

angular charts

Angular 角度2水平叠加图,angular,charts,Angular,Charts,我需要实现一个如下所示的图表。每个条代表总条数的百分比。例如，紫色条约为40%，最深的蓝色约为10%，绿色约为8%，等等。我在谷歌上搜索了一下，但我找不到任何能准确显示这一点的东西，我找到的接近点是，但我不确定它是否能起到作用这里有人做过这样的事吗？它开始看起来必须是定制的实现，我正试图避开它提前谢谢这是您想要实现的简单设置。它不使用任何图表库，只使用Angular 4.2和flexbox（CSS）将图表的值放入数组中（app.ts中的this.items）：导出类应用程序{ 构造函数

我需要实现一个如下所示的图表。每个条代表总条数的百分比。例如，紫色条约为40%，最深的蓝色约为10%，绿色约为8%，等等。我在谷歌上搜索了一下，但我找不到任何能准确显示这一点的东西，我找到的接近点是，但我不确定它是否能起到作用

这里有人做过这样的事吗？它开始看起来必须是定制的实现，我正试图避开它

提前谢谢

这是您想要实现的简单设置。它不使用任何图表库，只使用Angular 4.2和flexbox（CSS）

将图表的值放入数组中（

app.ts中的this.items

）：

导出类应用程序{
构造函数（）{
这个项目=[6,11,17,21,45]；
}
}

这些只是一些样本值，加起来是100%

在HTML（app.component.HTML）中填充它们，并使用app.ts中的值将条形图的宽度设置为百分比（请参见

[style.width]=“item+'%'”

）。索引不是特别需要的，但是当您想查看渲染的是哪个图表部分时，它会很方便



{{i}

为

提供一些flexbox属性（阅读更多有关CSS flexbox的信息），以水平拉伸条并填充

ul {
  display: flex;
  flex-flow: row wrap;
}

样式的其余部分只是一些标记，以更好地显示它

看看我把它们放在一起。

这是一个简单的设置，你想要实现什么。它不使用任何图表库，只使用Angular 4.2和flexbox（CSS）