Chart.js - 甜甜圈总是显示工具提示？

When using the Chart.js library, I can add multiple doughnuts on my page without a problem.

使用Chart.js库时，我可以在我的页面上添加多个甜甜圈而不会出现问题。

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

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

But I cannot find a way to always show the tooltips - not only when hovering the mouse over the doughnut. Does anybody know if this is possible?

但我无法找到一种始终显示工具提示的方法 - 不仅仅是将鼠标悬停在甜甜圈上时。有人知道这是否可行？

5 个解决方案

#1

I had the same problem today and solved it quite easy by adding the options onAnimationComplte and tooltipevents.

我今天遇到了同样的问题，通过添加onAnimationComplte和tooltipevents选项很容易解决。

onAnitmationComplete calls the method to show the tooltips like a hover event does. Normally you define the events in tooltipevents to display the tooltips but we need to remove them and pass an empty array.

onAnitmationComplete调用该方法来显示像悬停事件一样的工具提示。通常，您在tooltipevents中定义事件以显示工具提示，但我们需要删除它们并传递一个空数组。

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

注：（http://www.chartjs.org/docs/#doughnut-pie-chart）。

Javascript:

使用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:

HTML：

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

Example Data:

示例数据：

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 PIE：http：//jsfiddle.net/5gyfykka/

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

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

#2

I expanded on Kapi's method so when you hover over it you still get to keep the default functionality like color change, and when you hover over a section it will hide the rest. I think it looks better.

我扩展了Kapi的方法，所以当你将鼠标悬停在它上面时，你仍然可以保持默认功能，如颜色变化，当你将鼠标悬停在一个部分上时，它将隐藏其余部分。我觉得它看起来更好。

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);
});

#3

You can do this by writing your own plugin which supports ChartJS version > 2.1.5.

您可以通过编写支持ChartJS版本> 2.1.5的自己的插件来完成此操作。

Include the following code in your 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

And then just use the following line in the options of any chart on which you want to show all the tooltips available.

然后，只需在要显示所有可用工具提示的任何图表的选项中使用以下行。

showAllTooltips: true

Working Fiddle is given below

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

Working JSFIDDLE here.

#4

In case someone tries to hide some of the segment tooltips; do it in the tooltipTemplate:

如果有人试图隐藏某些段工具提示;在tooltipTemplate中执行：

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

for example this code checks for the %value and only displays values higher than 8% to decrease clutter

例如，此代码检查％值，仅显示高于8％的值以减少混乱

#5

If you want to display just ONE tooltip, you have to use this code. Here is exaple for first segment.

如果您只想显示一个工具提示，则必须使用此代码。这是第一部分的优点。

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

Function showTooltip only accepts 2 dimensional arrays for first parameter.

函数showTooltip仅接受第一个参数的二维数组。