Gráfico.js v2: ¿Cómo hacer que las descripciones emergentes siempre aparezcan en el gráfico circular?
He encontrado preguntas similares en Stack Overflow, pero todas ellas se abordaron hace uno y dos años. Ahora Gráfico.js ha aparecido en la versión 2, y muchos de los cambios en la documentación. ¿Puede alguien por favor ayudarme mostrando un ejemplo de gráfico circular con etiquetas - o gráfico circular con todas las sugerencias de su segmento son visibles?
UPDATE
Gracias a @potatopeelings, su respuesta funciona perfectamente para Chart.js v2. 1.
Aunque inicialmente pregunté cómo mostrar permanentemente información sobre herramientas en el gráfico circular aquí, encontré una mejor solución: ¡mostrar valores como etiquetas en porcentajes! Ahora está habilitado para gráfico circular en Gráfico.js v2. 1. En las opciones del gráfico:
animation: {
duration: 0,
onComplete: function () {
var self = this,
chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = '18px Arial';
ctx.textAlign = "center";
ctx.fillStyle = "#ffffff";
Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) {
var meta = self.getDatasetMeta(datasetIndex),
total = 0, //total values to compute fraction
labelxy = [],
offset = Math.PI / 2, //start sector from top
radius,
centerx,
centery,
lastend = 0; //prev arc's end line: starting with 0
for (var val of dataset.data) { total += val; }
Chart.helpers.each(meta.data.forEach( function (element, index) {
radius = 0.9 * element._model.outerRadius - element._model.innerRadius;
centerx = element._model.x;
centery = element._model.y;
var thispart = dataset.data[index],
arcsector = Math.PI * (2 * thispart / total);
if (element.hasValue() && dataset.data[index] > 0) {
labelxy.push(lastend + arcsector / 2 + Math.PI + offset);
}
else {
labelxy.push(-1);
}
lastend += arcsector;
}), self)
var lradius = radius * 3 / 4;
for (var idx in labelxy) {
if (labelxy[idx] === -1) continue;
var langle = labelxy[idx],
dx = centerx + lradius * Math.cos(langle),
dy = centery + lradius * Math.sin(langle),
val = Math.round(dataset.data[idx] / total * 100);
ctx.fillText(val + '%', dx, dy);
}
}), self);
}
},
3 answers
Solución para la versión de ChartJs > 2.1.5:
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;
}
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-23 11:06:04
Con el nuevo Gráfico.js 2.1 puede escribir un plugin para hacer esto y controlarlo a través de una propiedad options
Vista previa
Script
Tenga en cuenta que debe registrar el plugin antes de inicializar el gráfico
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,
_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;
}
}
});
Y luego
new Chart(ctx, {
type: 'pie',
data: data,
options: {
showAllTooltips: true
...
Con el anterior 2.x versión, usted debe ser capaz de mover la misma (o similar, no estoy seguro acerca de la estructura de datos anterior) a la options.animation.onComplete
Violín - http://jsfiddle.net/q15ta78q /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-07 14:43:37
Estaba buscando una solución similar y me encontré con este plugin de chartjs Gráfico.PieceLabel.js . Tiene configuraciones para mostrar modos como etiqueta, valor y porcentaje.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-21 17:21:41