webentwicklung-frage-antwort-db.com.de

Chart.js - Donut immer Tooltips anzeigen?

Wenn ich die Chart.js-Bibliothek verwende, kann ich problemlos mehrere Donuts auf meiner Seite hinzufügen.

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

Aber ich kann keinen Weg finden, um immer anzeigen die QuickInfos zu erhalten - nicht nur, wenn ich die Maus über den Donut bewege. Weiß jemand, ob das möglich ist?

jquerycharts
18
Taapo

Ich hatte heute das gleiche Problem und löste es ganz einfach, indem ich die Optionen für AnimationComplte und Tooltipevents hinzufügte.

onAnitmationComplete ruft die Methode auf, um die QuickInfos anzuzeigen, wie dies bei einem Hover-Ereignis der Fall ist. Normalerweise definieren Sie die Ereignisse in Tooltipevents, um die Tooltips anzuzeigen, aber wir müssen sie entfernen und ein leeres Array übergeben.

Hinweis: ( 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>

Beispieldaten:

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/

JSFiddle BAR/LINE: http://jsfiddle.net/5gyfykka/14/

43
Kapi

Sie können dies tun, indem Sie ein eigenes Plugin schreiben, das ChartJS Version> 2.1.5 unterstützt.

Fügen Sie den folgenden Code in Ihr Skript ein:

// 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

Verwenden Sie dann einfach die folgende Zeile in den Optionen eines beliebigen Diagramms, in dem Sie alle verfügbaren QuickInfos anzeigen möchten.

showAllTooltips: true

Working Fiddle ist unten angegeben

// 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>

Hier arbeitet JSFIDDLE.

8
Suhaib Janjua

Ich habe die Methode von Kapi erweitert, sodass Sie beim Bewegen des Mauszeigers immer noch die Standardfunktionalität wie Farbwechsel beibehalten und beim Bewegen des Mauszeigers über einen Abschnitt den Rest ausblenden können. Ich finde es sieht besser aus.

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

Für den Fall, dass jemand versucht, einige der Segment-Tooltips auszublenden. mach es in der tooltipTemplate:

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

beispielsweise überprüft dieser Code den% -Wert und zeigt nur Werte über 8% an, um Unordnung zu vermeiden

1
ardavar

Wenn Sie nur EINE QuickInfo anzeigen möchten, müssen Sie diesen Code verwenden. Hier ist ein Beispiel für das erste Segment.

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

Die Funktion showTooltip akzeptiert nur zweidimensionale Arrays für den ersten Parameter.

0
Jan Šafránek