1

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:

var ctx = document.getElementById("reporte_tecnicos").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
	labels: ["tec1", "tec2", "tec3",],
	datasets: [{
		label: '',
		backgroundColor: [
			"rgba(0, 150, 254, 0.5)",
			"rgba(150, 100, 50, 0.5)",
			"rgba(50, 50, 50, 0.5)",
			"rgba(255, 100, 0, 0.5)",
			"rgba(150, 100, 50, 0.5)",
			"rgba(100, 254, 0.5)",
			"rgba(25, 100, 200, 0.5)",
			"rgba(75, 75, 75, 0.5)",
			"rgba(80, 20, 0, 0.5)",
			"rgba(255, 50, 254, 0.5)"
		],
		data: [3, 2, 3,],
	}]
},
options: {
	scales: {
		yAxes: [{
			ticks: {
				beginAtZero: true
			}
		}]
	}
}
});
// REPORTE DE P
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="tecnician">
	<center><h3>Estadísticas de técnicos</h3></center>
	<div class="well" id="reporte_tecnicos_div">
		<canvas id="reporte_tecnicos" style="max-width: 50%; margin: 1px auto; float;none;"></canvas>
	</div>
</section>

documentación:

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

9
  • Pavio, que tal si pones algo de código para así no trabajar desde 0. Commented el 17 feb. 2017 a las 16:04
  • Pavio, crees que puedas poner los data, directamente sin agregar el PHP, porque no se puede ejecutar. Agrega los data sin el Array ya interpretado. Commented el 17 feb. 2017 a las 16:11
  • Ya está, disculpa se me había psado.
    – Pavlo B.
    Commented el 17 feb. 2017 a las 16:14
  • 1
    Agrega la libreria al Snippet, le falta la librería Chart. Please Commented el 17 feb. 2017 a las 16:28
  • No la encuentro, yo descargué el plugin direcamente... no estoy seguro de que tenga la libreria para ponerla "online"...
    – Pavlo B.
    Commented el 17 feb. 2017 a las 16:31

2 respuestas 2

2

Estabas buscando algo así?

Chart

var ctx = document.getElementById("reporte_tecnicos").getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
    labels: ["tec1", "tec2", "tec3", ],
    datasets: [{
        label: '',
        backgroundColor: [
            "rgba(0, 150, 254, 0.5)",
            "rgba(150, 100, 50, 0.5)",
            "rgba(50, 50, 50, 0.5)",
            "rgba(255, 100, 0, 0.5)",
            "rgba(150, 100, 50, 0.5)",
            "rgba(100, 254, 0.5)",
            "rgba(25, 100, 200, 0.5)",
            "rgba(75, 75, 75, 0.5)",
            "rgba(80, 20, 0, 0.5)",
            "rgba(255, 50, 254, 0.5)"
        ],
        data: [3, 2, 3, ],
    }]
},
options: {
    legend: {
        position: 'right'
    },
    scale: {
        display: false
    }
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<section id="tecnician">
<center><h3>Estadísticas de técnicos</h3></center>
<div class="well" id="reporte_tecnicos_div">
	<canvas id="reporte_tecnicos" style="max-width: 50%; margin: 1px auto; float;none;"></canvas>
</div>
</section>

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 }.

0

Te dejo el ejemplo basado en tu información, espero te sirva, saludos.

var data = {
    datasets: [{
        data: [
            3, 2, 3
        ],
        backgroundColor: [
            "rgba(0, 150, 254, 0.5)",
			"rgba(150, 100, 50, 0.5)",
			"rgba(50, 50, 50, 0.5)",
			"rgba(255, 100, 0, 0.5)",
			"rgba(150, 100, 50, 0.5)",
			"rgba(100, 254, 0.5)",
			"rgba(25, 100, 200, 0.5)",
			"rgba(75, 75, 75, 0.5)",
			"rgba(80, 20, 0, 0.5)",
			"rgba(255, 50, 254, 0.5)"
        ],
        label: '' 
    }],
    labels: [
        "tec1", "tec2", "tec3"
    ]
};
var ctx = document.getElementById("reporte_tecnicos").getContext('2d');

new Chart(ctx, {
    data: data,
    type: 'polarArea'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
		<canvas id="reporte_tecnicos" style="max-width: 50%; margin: 1px auto; float;none;"></canvas>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.