是否有任何人使用 syncfusion on 的 circulargauge？

Question

我正在 Angular 上使用来自 syncfusion 的 circulargauge，但我无法在其上显示值。如何绑定此仪表的值？

HTML:

<div nz-col nzSpan="8">
      <ejs-circulargauge #customization1='' width="180" height="200" [axes]="axes1"  
       id='customization-container1' >
      </ejs-circulargauge>
</div>

TS:

public axes1: object = [{
    annotations: [{
        content: '<div style="color:#666666;font-size:35px;">50.5GB</div>',
        angle: 180, radius: '0%', zIndex: '1'
    }, {
        content: '<div style="color:black;font-size:15px;">Used</div>',
        angle: 180, radius: '25%', zIndex: '1',
        textStyle: {
            fontFamily: 'Roboto',
            color: '#9E9E9E',
            fontStyle: 'Bold',
            fontWeight: 'Regular',
            size: '14px'
        }
    }],
    lineStyle: { width: 0 },
    startAngle: 180, endAngle: 180,
    radius: '97%',
    labelStyle: { font: { size: '0px' } },
    majorTicks: { width: 0 },
    minorTicks: { height: 0 },
    minimum: 0, maximum: 100,
    ranges: [{
        start: 0, end: 100,
        radius: '97%', startWidth: 20,
        endWidth: 20, color: '#E0E0E0'
    }],
    pointers: [{
        type: 'RangeBar',
        value: 70, radius: '97%',
        color: '#003366', animation: { duration: 0 },
        pointerWidth: 20
    }]
}];

Answer 1

我们可以使用圆形仪表小部件中的 axes[].pointers[].value 属性更改指针的值。使用此属性，可以在单击按钮或任何其他事件时动态更改指针值。可以使用 Circular Gauge 小部件中的 annotations 显示当前指针值。请在下面找到更改指针值的代码片段。

代码段：

[app.component.html]
<button id="currentValue1" (click)="onClickAdd()"> Value Added
</button>
<ejs-circulargauge #customization1></ejs-circulargauge>

[app.component.ts]
@ViewChild('customization1')
 public gaugeObj: CircularGaugeComponent; // created instance for the gauge.
// Bind the pointer value in the below method <br/>
onClickAdd() { 
    this.gaugeObj.axes[0].pointers[0].value = this.gaugeObj.axes[0].pointers[0].value + 10;
    let pointerValue: number = this.gaugeObj.axes[0].pointers[0].value;
    this.gaugeObj.setAnnotationValue(0, 0, '<div style="color:#666666;font-size:35px;">' + pointerValue + 'GB' + '</div>');

  }

我们已经创建了一个示例，可以从下面的 StackBlitz link 中找到它。 https://stackblitz.com/edit/angular-syncfusion-circular-gauge-ypj3oz?file=app.component.ts

是否有任何人使用 syncfusion on 的 circulargauge？

Is there any one work with circulargauge from syncfusion on?

syncfusion

angular