Closed pigreco closed 4 years ago
Puoi modificare la scala come meglio credi, è molto semplice, la posizione dei colori è data dai numeri 1, 0.90, 0.60 e cosi via, la posizione intermedia è lo .050 il colore lo modifichi cambiamdo il codice. La posizione va dal basso verso l'alto
il colore che vuoi aggiungere tu in questo caso è #001932 se deve stare in alto:
// colore Totò grd.addColorStop(0, '#001932');
`
my title |
||
lowest value |
||
- 0
- 50
- 100 |
||
highest value |
Ho inerito lo script della scala del colore dentro una tabella visto che non conosco la posizione definitiva dove va inserito l'oggetto, ho posizionato i div con le scritte 0 50 e 100 in una posizione relativa alla tabella, modicando il valore top puoi adattarli alla tua pagina, se necessario
il segno < è un font awesome, per cui dei far caricare anche il css esterno
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
già inserito nel codice html :-)
@gbvitrano devo usare lo script nel compositore di stampe di QGIS:
forse ho capito il problema... invece di usare un'etichetta ho usato aggiungi file html, ma ho fatto caricare il file da un server esterno
Come pensavo, non viene caricato il css esterno quindi occore commentare
Ecco il nuovo codice, ma le freccine sono più brutte :-)
<body>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<body style="background-color:white">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3"><p style="font-size:14px;font-family:arial;">my title</p></td>
</tr>
<tr>
<td colspan="3"><p style="font-size:12px;font-family:arial;">lowest value</p></td>
</tr>
<tr align="center">
<td width="60" height="320"><canvas id="myCanvas" width="50" height="300">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// add linear gradient
var grd = context.createLinearGradient(0,0,0,300, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, '#2b83ba');
// dark blue
grd.addColorStop(0.25, '#9dd3a7');
// dark blue
grd.addColorStop(0.50, '#ffedaa');
// dark blue
grd.addColorStop(0.75, '#f99e59');
// dark blue
grd.addColorStop(1, 'red');
context.fillStyle = grd;
context.fill();
</script></td>
<td width="5" height="320"> </td>
<td width="140" height="320" align="left" valign="top"><div id="0" style="position: relative; top:5px;"><-0</div>
<div id="50" style="position: relative; top:135px;"><- 50</div>
<div id="100" style="position: relative; top:260px;"><-100</div></td>
</tr>
<tr>
<td colspan="3"><p style="font-size:12px;font-family:arial;">highest value</p></td>
</tr>
</tbody>
</table>
</body>
</html>```
Si bisogna utilizzare l'etichetta e spuntare visualizza come html e non aggiungere direttamente l'html.
etichetta, visualizza come html ed ho elimato il css esterno :-)
@gbvitrano e @ludovico85
chissà se è possibile fare una legenda continua ma orizzontale!!!
potrei girarla, ma il testo no!!!
questo codice
<body>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<body style="background-color:white">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3"><p style="font-size:20px;font-family:arial;">Grazie Gianni
<tr>
<td colspan="3"><p style="font-size:15px;font-family:arial;">cose che pampine</p></td>
</tr>
<tr align="center">
<td width="50" height="300"><canvas id="myCanvas" width="50" height="300">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// add linear gradient
var grd = context.createLinearGradient(0,0,0,300, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, '#2b83ba');
// dark blue
grd.addColorStop(0.25, '#9dd3a7');
// dark blue
grd.addColorStop(0.50, '#ffedaa');
// dark blue
grd.addColorStop(0.75, '#f99e59');
// dark blue
grd.addColorStop(1, 'red');
context.fillStyle = grd;
context.fill();
</script></td>
<td width="0" height="320"> </td>
<td width="140" height="300" align="left" valign="top">
<div id="0" style="position: relative; top:0px;">→ 0</div>
<div id="25" style="position: relative; top:55px;">→ 25</div>
<div id="50" style="position: relative; top:110px;">→ 50</div>
<div id="75" style="position: relative; top:165px;">→ 75</div>
<div id="100" style="position: relative; top:220px;">→ 100</div></td>
</tr>
<tr>
<td colspan="3"><p style="font-size:16px;font-family:arial;">Grazie Ludovico</p></td>
</tr>
</tbody>
</table>
</body>
</html>
genera questo
HTML VIEWER
https://jsonformatter.org/html-viewer/64367a
Orizzontale! https://jsfiddle.net/ludovico85/qk28fnu7/
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan = "5" align="center" style="position: relative; left:0px; text-align:center">my legend YlGn</td>
</tr>
<tr>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">lowest<br>value</td>
<td align="left" width="50%" style="position: relative; left:0px;"> </td>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">highest<br>value</td>
</tr>
<tr align="center">
<td width="5" height="10"> </td>
<td colspan = "3" width="320" height="60"><canvas id="myCanvas1" width="300" height="50">
</canvas>
<script>
var canvas = document.getElementById('myCanvas1');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// add linear gradient
var grd = context.createLinearGradient(0,0,300,0, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, '#ffffcc');
// dark blue
grd.addColorStop(0.25, '#c2e699');
// dark blue
grd.addColorStop(0.50, '#78c679');
// dark blue
grd.addColorStop(0.75, '#31a354');
// dark blue
grd.addColorStop(1, '#006837');
context.fillStyle = grd;
context.fill();
</script>
</td>
<td width="5" height="10"> </td>
</tr>
<tr>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">0</td>
<td align="center" width="50%">50</td>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">100</td>
</tr>
</table>
Orizzontale ma un po' più pulito e con qualche miglioria
https://jsfiddle.net/ludovico85/qk28fnu7/15/
<html>
<style>
body {
font-size: 12px;
font-family: arial;
}
</style>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan = "5" align="center" style="position: relative; left:0px; text-align:center">
<h3>my legend YlGn</h3>
</td>
</tr>
<tr>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">
lowest<br>value<br>⇩
</td>
<td align="left" width="50%" style="position: relative; left:0px;"> </td>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">
highest<br>value<br>⇩
</td>
</tr>
<tr align="center">
<td width="0%" height="0%"> </td>
<td colspan = "3" width="320" height="60">
<canvas id="myCanvas1" width="300" height="50"></canvas>
<script>
var canvas = document.getElementById('myCanvas1');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// add linear gradient
var grd = context.createLinearGradient(0,0,300,0, canvas.width, canvas.height);
// light yellow
grd.addColorStop(0, '#ffffcc');
// light green
grd.addColorStop(0.25, '#c2e699');
// green
grd.addColorStop(0.50, '#78c679');
// green
grd.addColorStop(0.75, '#31a354');
// dark green
grd.addColorStop(1, '#006837');
context.fillStyle = grd;
context.fill();
</script>
</td>
<td width="0%" height="0%"> </td>
</tr>
<tr>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">0</td>
<td align="center" width="50%">50</td>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">100</td>
</tr>
</table>
</body>
</html>
Ciao @ludovico85 (grazie) il codice di sopra si comporta diversamente in QGIS, (il primo è QGIS)
Non elegante ma devi giocare con i parametri width in % delle due colonne vuote che sono poste a destra e sinistra del div contenente il riempimento (cerca <td width="18%" height="0%"> )
<html>
<style>
body {
font-size: 12px;
font-family: arial;
width: 100%;
}
</style>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan = "5" align="center" style="position: relative; left:0px; text-align:center">
<h3>my legend YlGn</h3>
</td>
</tr>
<tr>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">
lowest<br>value<br>⇩
</td>
<td align="left" width="50%" style="position: relative; left:0px;"> </td>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px; text-align:center">
highest<br>value<br>⇩
</td>
</tr>
<tr align="center">
<td width="18%" height="0%"> </td>
<td colspan = "3" width="320" height="30">
<canvas id="myCanvas1" width="300" height="50"></canvas>
<script>
var canvas = document.getElementById('myCanvas1');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// add linear gradient
var grd = context.createLinearGradient(0,0,300,0, canvas.width, canvas.height);
// light yellow
grd.addColorStop(0, '#ffffcc');
// light green
grd.addColorStop(0.25, '#c2e699');
// green
grd.addColorStop(0.50, '#78c679');
// green
grd.addColorStop(0.75, '#31a354');
// dark green
grd.addColorStop(1, '#006837');
context.fillStyle = grd;
context.fill();
</script>
</td>
<td width="18%" height="0%"> </td>
</tr>
<tr>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">0</td>
<td align="center" width="50%">50</td>
<td colspan = "2" align="center" width="25%" style="position: relative; left:0px;text-align:center">100</td>
</tr>
</table>
</body>
</html>
@ludovico85 risolto avevo creato un riquadro piccolo, appena l'ho ridimensionato sono apparse le cifre, grazie
ora mi tocca fare una bella ricetta!!! ;-)
chiudo issue spero presto di fare ricetta.
grazie a tutti
qui plugin per QGIS 3
Grazie a questo codice HTML (by Ludovico Frate @ludovico85) preso da qui è possibile aggiungere una legenda continua, come questa:
questo il codice:
vorrei aggiungere, sul lato destro, una scala di valori (es: 0,25,50,75,100)
grazie!