Предсказатель погоды
(custom)
<html>
<head>
<script src="/js/canvas-gauges/gauge.min.js"></script>
</head>
<body>
<center>
<canvas data-type="radial-gauge"
data-width="200"
data-height="200"
data-units="Осадки | Солнечно"
data-title="Предсказатель погоды"
data-value=%Predictor.DT%
data-min-value="-500"
data-max-value="500"
data-major-ticks="[-500,-450,-400,-350,-300,-250,-200,-150,-100,-50,0,50,100,150,200,250,300,350,400,450,500]"
data-minor-ticks="2"
data-stroke-ticks="true"
data-animation-rule="elastic"
data-animation-duration="500"
data-highlights='[
{"from": -100, "to": 0, "color": "rgba(78, 187, 48, 1)"},
{"from": -300, "to": -100, "color": "rgba(229, 210, 6, 1)"},
{"from": 100, "to": 300, "color": "rgba(229, 210, 6, 1)"},
{"from": -500, "to": -300, "color": "rgba(229, 6, 6, 1)"},
{"from": 300, "to": 500, "color": "rgba(229, 6, 6, 1)"},
{"from": 0, "to": 100, "color": "rgba(78, 187, 48, 1)"}
]'
data-ticks-angle="225"
data-start-angle="67.5"
data-border-shadow-width="0"
data-borders="true"
data-needle-type="arrow"
data-needle-width="3"
data-needle-circle-size="7"
data-needle-circle-outer="true"
data-needle-circle-inner="false"
data-animation-duration="1500"
data-animation-rule="linear"
data-value-box-border-radius="2"
data-font-value="Led"
data-font-numbers="Led"
data-font-title="Led"
data-font-units="Led"
></canvas>
</center>
</body>
</html>