jquery - chartjs - Chart.js-Donut muestra información sobre herramientas siempre?
stacked bar chart js (5)
Cuando uso la biblioteca Chart.js, puedo agregar múltiples donuts en mi página sin ningún problema.
http://www.chartjs.org/docs/#doughnut-pie-chart
Pero no puedo encontrar una manera de mostrar siempre la información sobre herramientas, no solo al pasar el mouse sobre la dona. ¿Alguien sabe si esto es posible?
Si desea visualizar solo UNA información sobre herramientas, debe usar este código. Aquí está el exaple para el primer segmento.
chart.showTooltip([chart.segments[0]], true);
La función showTooltip solo acepta 2 matrices dimensionales para el primer parámetro.
Tuve el mismo problema hoy y lo resolví bastante fácil al agregar las opciones en AnimationComplte y Tooltipevents.
onAnitmationComplete llama al método para mostrar los tooltips como lo hace un evento hover. Normalmente usted define los eventos en tooltipevents para mostrar los tooltips, pero necesitamos eliminarlos y pasar un array vacío.
Nota :( 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>
Ejemplo de datos:
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/
Expandí el método de Kapi, así que cuando pasas el cursor sobre él, puedes mantener la funcionalidad predeterminada, como el cambio de color, y cuando pasas el cursor sobre una sección, ocultará el resto. Creo que se ve mejor
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);
});
En caso de que alguien intente ocultar algunos de los tooltips del segmento; hazlo en el tooltipTemplate:
tooltipTemplate : "<% var percentage = Math.round(circumference / 6.283 * 100); if (percentage >8)%><%= percentage %>%";
por ejemplo, este código comprueba el valor% y solo muestra valores superiores al 8% para disminuir el desorden
Puede hacerlo escribiendo su propio complemento que sea compatible con la versión de ChartJS> 2.1.5.
Incluye el siguiente código en tu 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
Y luego solo use la siguiente línea en las opciones de cualquier gráfico en el que quiera mostrar todas las sugerencias de herramientas disponibles.
showAllTooltips: true
Working Fiddle se da a continuación
// 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>