web-dev-qa-db-fra.com

Comment afficher aucun message de données disponibles dans les graphiques

Pouvons-nous afficher un message à l'aide de highcharts.Lorsque les données ne sont pas disponibles? nous devons montrer un message Exemple: No Data Available. Si nous avons des données masquer: No Data Available message . dans les highcharts dynamiquement

  Highcharts.chart('container', {
  chart: {
     type: 'bubble',
     plotBorderWidth: 0,
     zoomType: 'xy'
   },
});
javascripthighchartsno-data
18
Kondal

Vous pouvez utiliser Highcharts Chart Renderer

Voici un exemple dans JSFiddle

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: []

}, function(chart) { // on complete

    chart.renderer.text('No Data Available', 140, 120)
        .css({
            color: '#4572A7',
            fontSize: '16px'
        })
        .add();

});
11
fustaki

Incluez le fichier no-data-to-display.js dans votre page. Il est livré avec des graphiques élevés. Vous pouvez l'obtenir ici autrement: https://code.highcharts.com/modules/no-data-to-display.js

Le message par défaut est "Aucune donnée à afficher". Si vous souhaitez le modifier, vous pouvez le faire:

Highcharts.setOptions({
    lang: {
        noData: 'Personalized no data message'
    }
});
15
Talha Khan

Certaines de ces autres réponses semblent un peu folles ... voici une solution super basique que je voulais partager:

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

9
Cumulo Nimbus

Sur la base de votre commentaire ( si nous avons encore des données ne montrant aucun message de données disponibles, pouvons-nous nous cacher dans les highcharts si nous avons des données). Je pense que vous utilisez la solution de fustaki et que vous ne voulez pas utilisez le module no-data-to-display.js . Oui, il y a un problème comme mentionné. Vous pouvez toujours utiliser le même code en le modifiant, c'est-à-dire ajouter une condition à l'intérieur de la fonction continue pour vérifier si la série est vide ou non, en fonction de ce message de rendu.

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: []

}, function(chart) { // on complete
  if (chart.series.length < 1) { // check series is empty
    chart.renderer.text('No Data Available', 140, 120)
      .css({
        color: '#4572A7',
        fontSize: '16px'
      })
      .add();
  }
});

Fiddle démo

6
Deep 3015

Pour moi, avec la dernière version, cela fonctionne comme ceci:

const Highcharts = require('highcharts');

import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
NoDataToDisplay(Highcharts);

Highcharts.setOptions({
  lang: {
    noData: 'No data is available in the chart'
  }
});
1
Patrik Laszlo

Avec la version actuelle (v7.1.2) et le module no-data-to-display connecté (v7.1.2), vous pouvez afficher votre message 'no data' lorsque vous créez un objet graphique comme Patrik l'a dit en définissant l'option lang.noData.

Pour pouvoir modifier ce message une fois le graphique créé, vous devez appeler la méthode

yourChartObject.showNoData('you new message')
0
Starina