Eliminando leyendas en gráficos con chart.js v2

105

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

javascript jquery css charts chart.js2 Zeliax
fuente

Respuestas:

252

El objeto de opciones se puede agregar al gráfico cuando se crea el nuevo objeto Gráfico.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});
BrightIntelAnochecer
fuente
1
Muchas gracias, estaba usando react y esto dos para hacerlo de manera reaccionar .. <Donut data = {data} options = {{legend: false}} />
Newton Sheikh
42

Puede cambiar las opciones usando Chart.defaults.globalen su archivo javascript. Por lo tanto, desea cambiar las opciones de leyenda y descripción emergente.

Quitar leyenda

Chart.defaults.global.legend.display = false;

Eliminar información sobre herramientas

Chart.defaults.global.tooltips.enabled = false;

Aquí hay un violinista que trabaja.

cmlonder
fuente
Frio. No sabía cómo usar esas funciones porque no sabía que podía escribir esos comandos en mi Javascript.
Zeliax
1

Simplemente necesita agregar esa leyenda de línea: {display: false}

Armada
fuente
5
¿En qué se diferencia esta respuesta de otras respuestas?
Shanteshwar Inde