web-dev-qa-db-fra.com

Chart.js - Donut affiche toujours des info-bulles?

Lorsque j'utilise la bibliothèque Chart.js, je peux ajouter plusieurs beignets sur ma page sans problème.

http://www.chartjs.org/docs/#doughnut-pie-chart

Mais je ne peux pas trouver un moyen de toujours montrer les info-bulles - pas seulement lorsque vous passez la souris sur le beignet. Est ce que quelqu'un sait si c'est possible?

jquerycharts
18
Taapo

J'ai eu le même problème aujourd'hui et l'ai résolu assez facilement en ajoutant les options onAnimationComplte et tooltipevents.

onAnitmationComplete appelle la méthode pour afficher les info-bulles comme un événement survolé. Normalement, vous définissez les événements dans les info-bulles pour afficher les info-bulles, mais nous devons les supprimer et passer un tableau vide.

Remarque: ( http://www.chartjs.org/docs/#doughnut-pie-chart ).

Javascript:

var options = 
{
    tooltipTemplate: "<%= value %>",

    onAnimationComplete: function()
    {
        this.showTooltip(this.segments, true);

        //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
        //this.showTooltip(this.datasets[0].bars, true);

        //Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
        //this.showTooltip(this.datasets[0].points, true);  
    },

    tooltipEvents: [],

    showTooltips: true
}

var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);

HTML:

<div id="chartContainer">
    <canvas id="chart" width="200" height="200"></canvas>
</div>

Exemples de données:

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870"
    }
]

JSFiddle PIE: http://jsfiddle.net/5gyfykka/

BARRE/LIGNE JSFiddle: http://jsfiddle.net/5gyfykka/14/

43
Kapi

Vous pouvez le faire en écrivant votre propre plugin qui prend en charge la version ChartJS> 2.1.5.

Incluez le code suivant dans votre script:

// Show tooltips always even the stats are zero

Chart.pluginService.register({
  beforeRender: function(chart) {
    if (chart.config.options.showAllTooltips) {
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = [];
      chart.config.data.datasets.forEach(function(dataset, i) {
        chart.getDatasetMeta(i).data.forEach(function(sector, j) {
          chart.pluginTooltips.Push(new Chart.Tooltip({
            _chart: chart.chart,
            _chartInstance: chart,
            _data: chart.data,
            _options: chart.options.tooltips,
            _active: [sector]
          }, chart));
        });
      });

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) {
        if (easing !== 1)
          return;
        chart.allTooltipsOnce = true;
      }

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
        tooltip.initialize();
        tooltip.update();
        // we don't actually need this since we are not animating tooltips
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
});

// Show tooltips always even the stats are zero

Et puis utilisez simplement la ligne suivante dans les options de tout graphique sur lequel vous souhaitez afficher toutes les info-bulles disponibles.

showAllTooltips: true

Fonctionne Fiddle est donné ci-dessous

// Show tooltips always even the stats are zero

Chart.pluginService.register({
  beforeRender: function(chart) {
    if (chart.config.options.showAllTooltips) {
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = [];
      chart.config.data.datasets.forEach(function(dataset, i) {
        chart.getDatasetMeta(i).data.forEach(function(sector, j) {
          chart.pluginTooltips.Push(new Chart.Tooltip({
            _chart: chart.chart,
            _chartInstance: chart,
            _data: chart.data,
            _options: chart.options.tooltips,
            _active: [sector]
          }, chart));
        });
      });

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) {
        if (easing !== 1)
          return;
        chart.allTooltipsOnce = true;
      }

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
        tooltip.initialize();
        tooltip.update();
        // we don't actually need this since we are not animating tooltips
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
});

// Show tooltips always even the stats are zero


var canvas = $('#myCanvas2').get(0).getContext('2d');
var doughnutChart = new Chart(canvas, {
  type: 'doughnut',
  data: {
    labels: [
      "Success",
      "Failure"
    ],
    datasets: [{
      data: [45, 9],
      backgroundColor: [
        "#1ABC9C",
        "#566573"
      ],
      hoverBackgroundColor: [
        "#148F77",
        "#273746"
      ]
    }]
  },
  options: {
    // In options, just use the following line to show all the tooltips
    showAllTooltips: true
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
     <canvas id="myCanvas2" width="350" height="296"></canvas>
</div>

Travail de JSFIDDLE ici.

8
Suhaib Janjua

J'ai développé la méthode de Kapi, donc lorsque vous passez la souris dessus, vous conservez toujours la fonctionnalité par défaut comme le changement de couleur, et lorsque vous survolez une section, elle masque le reste. Je pense que ça a l'air mieux.

var options =
{
    onAnimationComplete: function () {
        this.showTooltip(this.segments, true);
    },        
}

var ctx = document.getElementById("Chart").getContext("2d");
var myPieChart = new Chart(ctx).Pie(data, options);

$("#Chart").on('mouseleave', function (){
    myPieChart.showTooltip(myPieChart.segments, true);
});
6
Indy411

Au cas où quelqu'un essaierait de masquer certaines info-bulles de segment; faites-le dans le tooltipTemplate:

tooltipTemplate : "<%  var percentage = Math.round(circumference / 6.283 * 100); if (percentage >8)%><%= percentage %>%";

par exemple, ce code vérifie la valeur% et n'affiche que des valeurs supérieures à 8% pour réduire l'encombrement

1
ardavar

Si vous souhaitez afficher une seule info-bulle, vous devez utiliser ce code. Voici un exemple pour le premier segment.

chart.showTooltip([chart.segments[0]], true);

La fonction showTooltip accepte uniquement les tableaux bidimensionnels pour le premier paramètre.

0
Jan Šafránek