使用Chart.js庫時,我可以在頁面上添加多個甜甜圈而不會出現問題。Chart.js - 甜甜圈始終顯示工具提示?
http://www.chartjs.org/docs/#doughnut-pie-chart
但我不能找到一種方法來始終顯示工具提示 - 將鼠標懸停在甜甜圈不僅當。有誰知道這是否可能?
使用Chart.js庫時,我可以在頁面上添加多個甜甜圈而不會出現問題。Chart.js - 甜甜圈始終顯示工具提示?
http://www.chartjs.org/docs/#doughnut-pie-chart
但我不能找到一種方法來始終顯示工具提示 - 將鼠標懸停在甜甜圈不僅當。有誰知道這是否可能?
我今天遇到了同樣的問題,並通過添加動畫集和工具事件選項來解決它非常簡單。
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/
我對卡皮的方法展開,所以當你在它懸停你仍然得到保持一樣的顏色變化的默認功能,當你將鼠標懸停在一節將隱藏休息。我認爲它看起來更好。
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);
});
如果有人試圖隱藏部分工具提示,做到這一點的tooltipTemplate:
tooltipTemplate : "<% var percentage = Math.round(circumference/6.283 * 100); if (percentage >8)%><%= percentage %>%";
例如用於百分數值,只顯示該代碼檢查值高於8%,減少雜波
如果你想僅顯示一個提示,你必須使用這段代碼。這裏是第一部分的例子。
chart.showTooltip([chart.segments[0]], true);
函數showTooltip只接受第一個參數的二維數組。
你可以通過編寫自己的插件來支持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>
你讓我的一天;) – 2017-06-02 17:52:28
當數據被隱藏時,我們如何隱藏標籤?我點擊數據集按鈕和餡餅皮,但標籤仍然可見。 – adelriosantiago 2017-09-10 05:20:27
給出你從哪裏得到的圖表對象?你是否先創建圖表然後設置選項? – kentverger 2014-09-30 16:54:40
@kentverger是的,我改變了代碼,所以你可以看到我是如何解決它的。 – Kapi 2014-10-01 07:47:41
只是爲了建立這個例子,換掉 「chart.showTooltip(chart.segments,true);」 與 「this.showTooltip(this.segments,true);」 ...那麼你不需要擔心命名約定:) – james 2014-10-20 08:42:57