При использовании библиотеки Chart.js я могу добавить несколько пончиков на свою страницу без проблем.
http://www.chartjs.org/docs/#doughnut-pie-chart
Но я не могу найти способ всегда показывать всплывающие подсказки - не только при наведении мыши на пончик. Кто-нибудь знает, возможно ли это?
У меня была та же проблема сегодня, и я решил ее довольно просто, добавив опции onAnimationComplte и tooltipevents.
onAnitmationComplete вызывает метод для отображения всплывающих подсказок, как это делает событие hover. Обычно вы определяете события в tooltipevents для отображения всплывающих подсказок, но нам нужно их удалить и передать пустой массив.
Примечание:(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/
JSFiddle BAR/LINE: http://jsfiddle.net/5gyfykka/14/
Я расширил метод 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);
});
Вы можете сделать это, написав свой собственный плагин, который поддерживает версию ChartJS > 2.1.5.
Включите следующий код в 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
А затем просто используйте следующую строку в настройках любой диаграммы, на которой вы хотите показать все всплывающие подсказки.
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>Если кто-то пытается скрыть некоторые всплывающие подсказки сегмента; сделайте это в tooltipTemplate:
tooltipTemplate : "<% var percentage = Math.round(circumference / 6.283 * 100); if (percentage >8)%><%= percentage %>%";
например, этот код проверяет значение% и отображает только значения более 8% для уменьшения помех
Если вы хотите отображать только одну всплывающую подсказку, вы должны использовать этот код. Вот пример для первого сегмента.
chart.showTooltip([chart.segments[0]], true);
Функция showTooltip принимает только 2-мерные массивы для первого параметра.