search

Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.58k stars 396 forks source link

canvas surrounded by div element #146

Open broderickwang opened 7 years ago

broderickwang commented 7 years ago

Hi, In canvas-gauges , could the canvas surrounded by the div element? In my project , the canvas is not display in div. `

<canvas data-type="radial-gauge" data-width="200" data-height="200" data-units="Km/h" data-title="速度" data-value="50" data-min-value="0" data-max-value="220" data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220" data-minor-ticks="2" data-stroke-ticks="false" data-highlights='[ { "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" }, { "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" }, { "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" }, { "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" }, { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" } ]' data-color-plate="#222" data-color-major-ticks="#f5f5f5" data-color-minor-ticks="#ddd" data-color-title="#fff" data-color-units="#ccc" data-color-numbers="#eee" data-color-needle-start="rgba(240, 128, 128, 1)" data-color-needle-end="rgba(255, 160, 122, .9)" data-value-box="true" data-animation-rule="bounce" data-animation-duration="500" data-font-value="Led" data-animated-value="true"

` have any problem? THX!

broderickwang commented 7 years ago

image

broderickwang commented 7 years ago

image the first canvas is not display , but the second without div is ok .

whurlston-cl commented 7 years ago

Can you post your entire div with the canvas inside it?

Here are two gauges, both inside divs with the divs overlayed on top of each other and it works just fine: https://jsfiddle.net/v2vbe58w/

broderickwang commented 7 years ago

@whurlston-cl in my project , it's not appear...