Bonsoir, j’ai créer un design pour être afficher sur un smartphone.
Quand je vais sur un graphique pour température je ne voit pas la valeur, car avec le nom de l’objet plus le nom de l’équipement sur le smartphone la valeur apparait pas du coup.
Il es possible de reporter cette valeur en bas a coter de l’heure ou point du relevé.
Ou si il y a une solution qui m’aurait échapper merci.
Hello,
En effet, ça serait plutôt bien de trouver une autre façon de l’afficher.
Bison
1 « J'aime »
Je déterre ce post, j’ai le même besoin… Quelqu’un aurait trouvé une solution?
C’est highchart le soucis visiblement.
Par contre, autant j’arrive à reproduire, donc masquer la fin du popup sur la droite, mais j’arrive pas à masquer le début sur la gauche. Donc on pourrait peut-être mettre la valeur en premier
val unité : commandName
non ?
Je vais regarder mais je doute qu’on puisse faire autre chose.
jouant avec la personnalisation css et script dans un html
un vieux design
sur tel c’est pas facile mais de mémoire les 3 lignes
refont la dispo
avec beaucoup de dechet
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<div class="line one">Nord</div>
<div class="line two">Sud</div>
<div class="line three">Serre</div>
<style>
.line {
height:3px;
width:250px;
color: white;
margin-bottom:10px;
position: absolute;
border-radius : 10px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.one {
background: blue;
width:50px;
bottom:0;
top: 0px;
}
.two {
background: yellow;
width:50px;
bottom:10;
top: 20px;
}
.three {
background: orange;
width:50px;
bottom:10;
top: 40px;
}
.highcharts-plot-band
{fill: none;}
/**
.highcharts-button
{display:none;}
.highcharts-background {
fill: #2a2a2b!important;
}
/**
.highcharts-xaxis-labels text {
stroke: #7cb5ec;
stroke-width: 0.5px;
}
.highcharts-yaxis-labels text {
stroke: red;
stroke-width: 0.5px;
}
**/
tspan {
font-family:oboto-Light,Helvetica Neue,Arial,sans-serif;
// fill:white;
font-size:12pt;
}
/**
https://mycolor.space/gradient?ori=circle&hex=%23051937&hex2=%23A8EB12&sub=1
{stroke:#000!important;stroke-width: 0.5px; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:12pt;}
https://la-cascade.io/combinateurs-et-pseudo-classes-css/
fill: #7cb5ec;
https://www.highcharts.com/docs/chart-design-and-style/style-by-css
.highcharts-plot-band {
fill: none;
}
.highcharts-plot-background {
fill:#900909;
}
.highcharts-button-box {
display: none;
}
.highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
display: none;
}
.highcharts-plot-border {
stroke-width: 2px;
stroke: green;
}
.highcharts-plot-background {
fill:none;
}
.highcharts-plot-band {
fill: #90094c;
}
**/
</style>
<script>
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts.theme = {
xAxis: {
labels: {
style: {
color: '#E0E0E3', // color bas
}
},
lineColor: '#30ffad', // barre du bas
tickColor: '#30ffad', // petit tick bas
},
yAxis: {
gridLineColor: '#30ffad', // barre
labels: {
style: {
color: '#e0e0e3', // color droite
}
},
tickColor: '#30ffad', // petit tick droite
tickWidth: 1,
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0',
}
},
navigation: {
buttonOptions: {
theme: {
fill: 'none'
}
}
},
}
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
</script>
<!--
[data-plan_id="461"] tspan
-->
j’ai ça en plus dans la personnalisation css (pour tous)
.highcharts-button-symbol {
/* display:none;
*/ visibility:hidden;
}
[data-highcharts-chart="4"] .highcharts-button-box {
visibility:hidden;
}
.highcharts-label:nth-child(2)>.highcharts-label-box+text>tspan:not(:nth-of-type(3))
{
display:none;
}
.highcharts-label:nth-child(3)>.highcharts-label-box+text>tspan:not(:nth-of-type(3))
{
display:none;
}
.highcharts-label:nth-child(4)>.highcharts-label-box+text>tspan:not(:nth-of-type(3))
{
display:none;
}
en v4 (qu’avec la personnalisation css « pour tous »)
Ca m’a l’air parfait! Reste plus qu’a attendre que ca ne resdecende en Stable.
Merci!
