Estoy creando una página de inicio usando Bootstrap, JQuery y Chart.js (v2). Hice funcionar mi implementación usando v1, pero recientemente entré en 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 la v2 es algo confusa para que me ponga a trabajar. Quiero que los gráficos respondan 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 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>functions.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 dejará de funcionar. 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
¡Voy a poner 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