Personalización de gráficas chartjs

publicado por: Anonymous

Desde hace unos días estoy trabajando con este plugin de jQuery para generar mis gráficas.

Puesto que la documentación está completamente en inglés me cuesta un poco identificar cada elemento que se menciona y sus posibles configuración para la personalización visual del mismo. Por eso acudo aquí para resolver algunas dudas.

Al utilizar la gráfica polarArea me encuentro con este ejemplo:

introducir la descripción de la imagen aquí

Me ha llamado la atención el hecho de que en mi caso aparece en el lateral izquierdo una línea con números que no quiero que aparezca, ilustro:

introducir la descripción de la imagen aquí

Por otra parte también me gustaría poder poner estos elementos en el lado derecho en modo de lista por ejemplo <ul>:

introducir la descripción de la imagen aquí

Muchas gracias.

codigo:

_x000D_

_x000D_

var ctx = document.getElementById("reporte_tecnicos").getContext('2d');_x000D_
var myChart = new Chart(ctx, {_x000D_
type: 'bar',_x000D_
data: {_x000D_
	labels: ["tec1", "tec2", "tec3",],_x000D_
	datasets: [{_x000D_
		label: '',_x000D_
		backgroundColor: [_x000D_
			"rgba(0, 150, 254, 0.5)",_x000D_
			"rgba(150, 100, 50, 0.5)",_x000D_
			"rgba(50, 50, 50, 0.5)",_x000D_
			"rgba(255, 100, 0, 0.5)",_x000D_
			"rgba(150, 100, 50, 0.5)",_x000D_
			"rgba(100, 254, 0.5)",_x000D_
			"rgba(25, 100, 200, 0.5)",_x000D_
			"rgba(75, 75, 75, 0.5)",_x000D_
			"rgba(80, 20, 0, 0.5)",_x000D_
			"rgba(255, 50, 254, 0.5)"_x000D_
		],_x000D_
		data: [3, 2, 3,],_x000D_
	}]_x000D_
},_x000D_
options: {_x000D_
	scales: {_x000D_
		yAxes: [{_x000D_
			ticks: {_x000D_
				beginAtZero: true_x000D_
			}_x000D_
		}]_x000D_
	}_x000D_
}_x000D_
});_x000D_
// REPORTE DE P

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<section id="tecnician">_x000D_
	<center><h3>Estadísticas de técnicos</h3></center>_x000D_
	<div class="well" id="reporte_tecnicos_div">_x000D_
		<canvas id="reporte_tecnicos" style="max-width: 50%; margin: 1px auto; float;none;"></canvas>_x000D_
	</div>_x000D_
</section>

_x000D_

_x000D_

_x000D_

documentación:

http://www.chartjs.org/docs/

solución

Estabas buscando algo así?

Chart

_x000D_

_x000D_

var ctx = document.getElementById("reporte_tecnicos").getContext('2d');_x000D_
var myChart = new Chart(ctx, {_x000D_
type: 'polarArea',_x000D_
data: {_x000D_
    labels: ["tec1", "tec2", "tec3", ],_x000D_
    datasets: [{_x000D_
        label: '',_x000D_
        backgroundColor: [_x000D_
            "rgba(0, 150, 254, 0.5)",_x000D_
            "rgba(150, 100, 50, 0.5)",_x000D_
            "rgba(50, 50, 50, 0.5)",_x000D_
            "rgba(255, 100, 0, 0.5)",_x000D_
            "rgba(150, 100, 50, 0.5)",_x000D_
            "rgba(100, 254, 0.5)",_x000D_
            "rgba(25, 100, 200, 0.5)",_x000D_
            "rgba(75, 75, 75, 0.5)",_x000D_
            "rgba(80, 20, 0, 0.5)",_x000D_
            "rgba(255, 50, 254, 0.5)"_x000D_
        ],_x000D_
        data: [3, 2, 3, ],_x000D_
    }]_x000D_
},_x000D_
options: {_x000D_
    legend: {_x000D_
        position: 'right'_x000D_
    },_x000D_
    scale: {_x000D_
        display: false_x000D_
    }_x000D_
}_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>_x000D_
<section id="tecnician">_x000D_
<center><h3>Estadísticas de técnicos</h3></center>_x000D_
<div class="well" id="reporte_tecnicos_div">_x000D_
	<canvas id="reporte_tecnicos" style="max-width: 50%; margin: 1px auto; float;none;"></canvas>_x000D_
</div>_x000D_
</section>

_x000D_

_x000D_

_x000D_

Básicamente cambié la posición de la leyenda hacia la derecha utilizando legend: { position: 'right'} y ocultando las líneas de las escalas con scale: { display: false }.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *