Chart.js - 甜甜圈始终显示工具提示？

Question

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

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

但我不能找到一种方法来始终显示工具提示 - 将鼠标悬停在甜甜圈不仅当。有谁知道这是否可能？

Answer 1

我今天遇到了同样的问题，并通过添加动画集和工具事件选项来解决它非常简单。

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

注意:(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> 

实施例的数据：

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/

JSFiddl ËBAR/LINE： http://jsfiddle.net/5gyfykka/14/

Answer 2

我对卡皮的方法展开，所以当你在它悬停你仍然得到保持一样的颜色变化的默认功能，当你将鼠标悬停在一节将隐藏休息。我认为它看起来更好。

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

Answer 3

如果有人试图隐藏部分工具提示，做到这一点的tooltipTemplate：

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

例如用于百分数值，只显示该代码检查值高于8％，减少杂波

Answer 4

如果你想仅显示一个提示，你必须使用这段代码。这里是第一部分的例子。

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

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

Answer 5

你可以通过编写自己的插件来支持ChartJS版本> 2.1.5。

包括在你的脚本如下代码：

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

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

showAllTooltips: true 

工作小提琴下面

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