如何在角度项目中使用ng-circle-progress src代码?

时间:2018-08-26 08:53:12

标签: javascript angular typescript angular6 geometry

我正在使用角度6,但我想使用ng-circle-progress。我实现了圆圈,但是我想更改一些我认为应该从src代码执行的操作。圈子中有unitstitle选项,我希望它们彼此靠近。我该怎么做?

app.module.ts

import {
  NgCircleProgressModule
} from 'ng-circle-progress';

imports: [
  CommonModule,
  RouterModule.forChild(HomeRoutingModule),
  NgCircleProgressModule.forRoot({
    "units": "Liter",
    "outerStrokeLinecap": "butt"
  })
]

home.component.html

<circle-progress
    [percent]="65"
    [radius]="100"
    [outerStrokeWidth]="8"
    [innerStrokeWidth]="2"
    [outerStrokeColor]=tank.outerColor
    [innerStrokeColor]="'#e2e2e2'"
    [animation]="true"
    [animationDuration]="300"
    [space]="5"
    [showSubtitle]= "false"
    [showUnits]= "true"
    [unitsFontSize]= "15"
    [titleFontSize]= "45"
    [clockwise]= "false">
</circle-progress>

这是输出的图像。如何控制65liter之间的空间?

enter image description here

2 个答案:

答案 0 :(得分:0)

要控制外圆和内圆之间的间距,请调整“间距”选项。 如果要减小圆圈之间的间距,请使用负值。

类似这样的东西:

<circle-progress
    ..... //other options
    [space]="-5"
    ..... //other options
</circle-progress>

如果要为应用程序中的所有进度条设置默认值,则可以在导入中添加此选项,如下所示:

imports: [
    NgCircleProgressModule.forRoot({
        space = -5
      })
]

答案 1 :(得分:0)

我认为这是一个错误。

在浏览器中打开开发工具面板,您可以在标题右侧看到空白吗?

enter image description here

您最好发布一个问题。

https://github.com/bootsoon/ng-circle-progress/issues