Puede que se de el caso de que halles algún fallo en tu código o proyecto, recuerda probar siempre en un ambiente de testing antes aplicar el código al trabajo final.
Solución:
Ahora existe la opción “espejo” para que la etiqueta aparezca dentro de la barra.
Ejemplo de configuración de “opciones” para un gráfico de barra horizontal:
options:
scales:
yAxes: [ticks: mirror: true]
Documento: http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration
Con referencia a la solución original para mostrar el valor de los datos mediante HTML5 Canvas fillText() método en el animation‘s onCompleteel siguiente código le proporcionará lo que necesita:
los key a la visualización personalizada de cualquier dato relacionado con el gráfico es inspeccionar el conjunto de datos del gráfico como en this.data.datasets abajo. Hice esto inspeccionando dónde están los diferentes valores en este conjunto de datos, así como la posición para colocarlos para el método fillText.
Inspeccionar el conjunto de datos del gráfico: Imagen
Guión (Chart.js 2.0 y superior):
var barOptions =
events: false,
showTooltips: false,
legend:
display: false
,
scales:
yAxes: [
display: false
]
,
animation:
onComplete: function ()
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset)
for (var i = 0; i < dataset.data.length; i++)
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
ctx.fillStyle = '#444'; // label color
var label = model.label;
ctx.fillText(label, left + 15, model.y + 8);
);
;
jsFiddle: http://jsfiddle.net/jfvy12h9/
Puede lograr este efecto en chartjs 2.0 + girando las etiquetas 90 grados y aplicando relleno negativo, de modo que la etiqueta se mueva hacia arriba dentro de la 'barra'. Algo como esto:
new Chart(document.getElementById(id),
type: 'bar',
data: data,
options:
scales:
xAxes: [
ticks:
autoSkip: false,
maxRotation: 90,
minRotation: 90,
padding: -110
]
);
Consulte la documentación de configuración de ticks para obtener más información.
Calificaciones y comentarios
Te invitamos a añadir valor a nuestra información cooperando tu veteranía en las interpretaciones.