Angular 2水平叠加图表

Question

我需要实现如下所示的图表。每个条形代表总数的百分比。例如，紫色条约为40％，最深的蓝色约为10％，绿色约为8％等等。我用Google搜索，但我找不到任何确切的结果，我发现的结果是{{ 3}}，但我不确定它是否会起作用。

有人在这做过类似的事吗？开始看起来它必须是自定义实现，我试图远离它。

提前致谢！

this

Answer 1

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

将图表的值放在数组中（{em> app.ts 中的this.items）：

    export class App {
      constructor() {
        this.items = [6, 11, 17, 21, 45];
      }
    }

这些只是一些样本值，它们一起是100（％）。

在HTML（ app.component.html ）中填充它们，并使用 app.ts中的值将栏的宽度设置为百分比（请参阅[style.width]="item + '%'"） 。索引并不是特别需要，但是当你想要查看哪个图表部分被渲染时，它可以很方便。

<ul class="valuechart">
  <li *ngFor="let item of items; let i = index" [style.width]="item + '%'">
    {{i}}
  </li>
</ul>

给<ul>一些flexbox属性（了解有关CSS flexbox at MDN的更多信息）以水平拉伸条并让它填写。

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

其余的造型只是一些标记，以显示它有点好。

查看the demo我放在一起。