web-dev-qa-db-fra.com

Commentaire afficher Aucune donnée disponible Message en highcharts

Pouvons-nous afficher un message à l'aide de tableaux de bord supérieurs, lorsque l'ensemble de données ne renvoie aucune donnée? Par exemple: "Aucune donnée disponible"

highcharts
13
Luis

Cela a été ajouté par le uservoice entry.

2
wergeld

Il est maintenant supporté dans Highcharts depuis v3.0.8

Vous devez charger le module no-data puis vous pouvez spécifier un message personnalisé via l'option lang.noData :

Highcharts.setOptions({lang: {noData: "Your custom message"}});
19
Jacques LESCOT

J'ai utilisé un peu de solution de contournement pour résoudre ce problème. Fondamentalement, je superpose une div contenant le message "Aucune donnée à afficher".

.noChartData {
     display: hidden;         
     position: absolute;
     z-index: 99;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
     font-weight: normal;
     color: #CCC;
}

<div class="noChartData">No Data to Display</div>

Lorsque la page se charge, j'utilise JQuery pour trouver la position du graphique, puis compense le div "No Data" et le révèle en conséquence.

var chartPosition = $("#myChart").position();
$(".noChartData").css("left", chartPosition.left + 400);
$(".noChartData").css("top", chartPosition.top + 150);

Vous devrez faire varier les décalages en fonction de la taille de votre graphique. J'utilise un appel AJAX pour extraire les données de la série et de la catégorie. Je sais donc, juste avant de lier le graphique, s'il faut ou non afficher le div flottant "Aucune donnée".

1
QFDev

Un exemple très simple:

Highcharts.setOptions({lang: {noData: "Your custom message"}})
var chart = Highcharts.chart('container', {
    series: [{
        data: []
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>

<div id="container" style="height: 250px"></div>

J'espère que cela aide quelqu'un

0
Cumulo Nimbus