"Velocímetro UAV modificado"
Bootstrap 4.1.1 Snippet by xmanfill

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<figure class="highcharts-figure"><div id="container"></div>
<p class="highcharts-description"></p></figure>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#container {height: 200px;}
.highcharts-figure, .highcharts-data-table table {
min-width:210px; max-width:300px; margin: 1em auto;}
.highcharts-data-table table {font-family:Verdana, sans-serif;
border-collapse:collapse; border: 1px solid #EBEBEB;
margin:10px auto; text-align:center; width:100%; max-width:500px;}
.highcharts-data-table caption {padding:1em 0; font-size:1em; color: #555;}
.highcharts-data-table th {font-weight:600; padding: 0.5em;}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {padding: 0.5em;}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {background: #f8f8f8;}
.highcharts-data-table tr:hover {background: #f1f7ff;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Highcharts.chart('container', {chart: {type: 'gauge',
plotBackgroundColor:null, plotBackgroundImage:null, plotBorderWidth:0, plotShadow:false},
title: {text: 'Velocidade'},
pane: {startAngle:-150, endAngle: 150,
background: [{backgroundColor: {linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [[0, '#FFF'], [1, '#333']]}, borderWidth:0, outerRadius:'109%'
},{backgroundColor: {linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops:[[0, '#333'], [1, '#FFF']]}, borderWidth:1, outerRadius:'107%'},{
// fundo padrão
},{backgroundColor:'#DDD', borderWidth:0, outerRadius:'105%', innerRadius:'103%'}]},
// o eixo do valor
yAxis: {min:0, max: 9, minorTickInterval:'auto', minorTickWidth:1, minorTickLength:1,
minorTickPosition:'inside', minorTickColor:'#777',
tickPixelInterval:30, tickWidth:2, tickPosition:'inside', tickLength: 10,
tickColor:'#777', labels:{step:1, rotation:'auto'},
title:{text:''},
plotBands: [{from:0, to:5, color: '#55BF3B'
},{from:5, to:7, color: '#DDDF0D'
},{from:7, to:9, color: '#DF5353'}]},
series: [{name:'Velocidade', data:[4], tooltip: {valueSuffix: 'º nível'}}]},);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit PRO
Metro style dynamic Tiles
Ui-Kit-Metro Like Nav

Questions / Comments: