javascript - pie - Eliminando leyendas en gráficos con chart.js v2
js chart min js (2)
El objeto de opciones se puede agregar al gráfico cuando se crea el nuevo objeto de gráfico.
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
Estoy haciendo una página de inicio usando Bootstrap, JQuery y Chart.js (v2). Tuve mi implementación trabajando usando v1, pero recientemente ingresé a Bower y descargué v2 usando eso.
Estoy haciendo una cuadrícula de 4 columnas, cada una de las cuales contiene un gráfico circular, sin embargo, la escala en v2 es un poco confusa para mí para empezar a trabajar. Quiero que los gráficos sean receptivos para que se escalen correctamente con los dispositivos más pequeños, como tabletas y teléfonos inteligentes, y uno de mis problemas es deshacerme de la leyenda de los gráficos, así como de la información de desplazamiento al pasar el mouse sobre las secciones de mi gráfico.
index.html
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
</div>
</div>
</body>
funciones.js
$(document).ready(function(){
var canvas = $("#chart1");
var data = {
labels: [],
datasets: [{
data: [10, 10],
backgroundColor: ["#F7464A", "#FDB45C"],
hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
}]
};
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
});
});
Si elimino el campo "etiquetas" vacío, el gráfico ya no funciona. Y por lo que parece, hay un pequeño espacio en la parte superior del gráfico que podría indicar que los encabezados están escritos, pero son solo cadenas vacías.
¿Alguien tiene una idea de cómo eliminar la leyenda y la descripción de desplazamiento? Simplemente no puedo entender cómo se usa esto
¡Obtendré mis manos alrededor de un jsfiddle tan pronto como tenga tiempo!
EDITAR: Enlace a los documentos: https://nnnick.github.io/Chart.js/docs-v2/#getting-started
Puede cambiar las opciones utilizando
Chart.defaults.global
en su archivo javascript.
Por lo tanto, desea cambiar las opciones de leyenda e información sobre herramientas.
Eliminar leyenda
Chart.defaults.global.legend.display = false;
Eliminar información sobre herramientas
Chart.defaults.global.tooltips.enabled = false;
Here hay un violinista que trabaja.