search

MeetmeLeave / ng-canvas-gauges

Angular2 component wrapper for the canvas-gauges library written by @Mikhus(https://github.com/Mikhus/canvas-gauges).
MIT License
38 stars 23 forks source link

ReDraw when properties change #25

Open BigRockK opened 5 years ago

BigRockK commented 5 years ago

I have an Angular 7 project that updates the highlights, maximum and units when the user wants. When using the options, I expected that when the options change the chart would redraw.

In the HTML: `<radial-gauge [options]="chartProperty" [value]="chartValue"

`

Then I update the object chartProperty when the user changes the settings. The console reports the following errors:

ERROR TypeError: Given gauge canvas element is invalid! at t.n [as type] (gauge.min.js:27) at new t (gauge.min.js:27) at RadialGauge$$1.push../node_modules/ng-canvas-gauges/fesm5/ng-canvas-gauges.js.RadialGauge$$1.ngOnInit (ng-canvas-gauges.js:413)

ERROR DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. at t.value (http://192.168.200.10/vendor.js:150835:6787) at RadialGauge$$1.push../node_modules/ng-canvas-gauges/fesm5/ng-canvas-gauges.js.RadialGauge$$1.ngOnInit (http://192.168.200.10/vendor.js:185763:98) at checkAndUpdateDirectiveInline (http://192.168.200.10/vendor.js:83338:19) at checkAndUpdateNodeInline (http://192.168.200.10/vendor.js:84602:20) at checkAndUpdateNode (http://192.168.200.10/vendor.js:84564:16) at debugCheckAndUpdateNode (http://192.168.200.10/vendor.js:85198:38) at debugCheckDirectivesFn (http://192.168.200.10/vendor.js:85158:13) at Object.eval [as updateDirectives] (ng:///AppModule/HookloadLgChartComponent.ngfactory.js:19:9) at Object.debugUpdateDirectives [as updateDirectives] (http://192.168.200.10/vendor.js:85150:21) at checkAndUpdateView (http://192.168.200.10/vendor.js:84546:14)

I'm thinking there should be a way to assign the object so it is able to update and redraw.