6

是否有详细的文档如何制作自定义 ngx-chart？这是我发现的，但无法开始使用： https ://medium.com/@amcdnl/charts-with-svgs-in-angular2-1d08a0e635ea

我想创建一个自定义时间线图表，如下所示：

https://drive.google.com/open?id=0B2wUYluH2H4vZXdNUmxjU3JIWmc https://drive.google.com/open?id=0B2wUYluH2H4vSnZkT1ZUdWd3N2M

我试图重新创建第二个，这是我目前完成的进度： https ://drive.google.com/open?id=0B2wUYluH2H4veGlNak13clRFeEk

我在这个图表中只使用了 svg 矩形，但我希望在 angular4 下使用 d3。我认为可以使用 ngx-chart 和 d3 来完成，但我找不到任何有用的文档。

svg 来源：

<svg class="chart" width="1440" height="100">
    <svg:g transform="translate(1, 5)">
        <g *ngFor="let bar of bars; let i = index">
            <rect [ngClass]="getFillClass(bar.eventType)"
                  [attr.x]="calcX(i)"
                  [attr.y]="calcY(bar.eventType)"
                  [attr.width]="bar.duration"
                  [attr.height]="getHeight(bar.eventType)"
                  rx="0"
                  ry="0">
            </rect>
        </g>
        <svg:line
                class="xAxis"
                [attr.x1]="0"
                [attr.y1]="maxHeight - 5"
                [attr.x2]="1440"
                [attr.y2]="maxHeight - 5" />
    </svg:g>
</svg>
4

0 回答 0