0
329
ViewsCómo corregir el ancho-alto de las leyendas del gráfico con desplazamiento de desbordamiento en ChartJS
Quiero crear un gráfico circular para mi proyecto, así que estoy usando ChartJS para ello, pero hay algunos problemas con chartJS. Si trabajo con 10 a 20 campos de datos, ese gráfico de tiempo se ve bien, pero cuando aplico más de 50 a 60 campos de datos en un gráfico, por lo que el gráfico se ve más pequeño en lugar de las leyendas, y si a veces el campo de datos es demasiado grande de lo que se oculta el gráfico, solo puede ver las leyendas, el gráfico se ha ido.
Quiero establecer la altura o el ancho de esas leyendas y también aplicarlas a la barra de desplazamiento si hay más datos.
Aquí está el enlace de violín para su referencia.
https://jsfiddle.net/KDM1010/5um78rbk/
<canvas id="myChart" width="500" height="300"></canvas> var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["lable_1", "lable_2", "lable_3", "lable_4", "lable_5", "lable_6", "lable_7", "lable_8", "lable_9", "lable_10", "lable_11", "lable_12", "lable_13", "lable_14", "lable_15", "lable_16", "lable_17", "lable_18", "lable_19", "lable_20", "lable_21", "lable_22", "lable_23", "lable_24", "lable_25", "lable_26", "lable_27", "lable_28", "lable_29", "lable_30", "lable_31", "lable_32", "lable_33", "lable_34", "lable_35", "lable_36", "lable_37", "lable_38", "lable_39", "lable_40", "lable_41", "lable_42", "lable_43", "lable_44", "lable_45", "lable_46", "lable_47", "lable_48", "lable_49", "lable_50"], datasets: [{ backgroundColor: ["#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#9a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#955a6","#9b59b6","#f1c40f","#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f,"#e74c3c","#34495e","#2ecc71","#3498db","#95a5a6","#9b59b6","#f1c40f","#e74c3c","#34495e" ], data: [74, 22, 77, 19, 72, 17, 55, 14, 64, 93, 99, 58, 6, 13, 31, 61, 19, 97, 25, 94, 50, 83, 3, 15, 54, 19, 60, 41, 37, 27, 51, 21, 36, 69, 80, 20, 64, 74, 79, 48, 66, 1, 94, 57, 5, 18, 83, 41, 64, 48] }] } });3 answers
Answer question0
Puedes intentar una cosa
Intenta separar la leyenda en un div diferente. ahora que tiene el control total del div, puede usar la ubicación personalizada y su propio css, considere el siguiente código:
<div id="js-legend" class="chart-legend"></div> document.getElementById('js-legend').innerHTML = myChart.generateLegend();Para referencia ver este VIOLÍN
Para manejar la leyenda interactiva, debe extender la función de devolución de llamada y manipularla de esta manera:
$("#js-legend > ul > li").on("click",function(e){ var index = $(this).index(); $(this).toggleClass("strike") var ci = e.view.myChart; var curr = ci.data.datasets[0]._meta[0].data[index]; curr.hidden = !curr.hidden ci.update(); })Para la Leyenda en acción, vea este VIOLÍN
Explicación :
Enlacé el gráfico a la ventana para que la vista de eventos pudiera obtenerlo, y más tarde, mediante el índice, manipulé los datos y actualicé el tiempo de ejecución, usé algunos trucos CSS para ilustrar el efecto de ataque.
0
No encontré ninguna solución para esto, pero puede desactivar la leyenda si se van a mostrar demasiadas etiquetas (lo hice en mi proyecto); aquí se establece un máximo de 15 etiquetas:
options : { responsive: true, maintainAspectRatio: false, layout: { padding: { left : 0, right : 0, top : 0, bottom : 0 } }, animation: { duration : 5000 }, legend: { display: this.chartValues.length <= 15, } }También puede hacer lugar para renderizar gráficos más grandes. Agregue esto a su archivo scss:
.chartjs-render-monitor{ height: 300px !important; }Espero que ayude a alguien.
0
Como se mencionó en otras respuestas, una posible solución es externalizar la leyenda como div HTML simple, sobre el cual tiene control total.
Ahora, en ChartJS v3 , se eliminó la función chart.generateLegend() .
Sin embargo, los mantenedores han publicado el llamado complemento htmlLegend que externaliza la leyenda, aquí está el enlace:
Leyenda HTML (DIV externo) - ChartJS Docs
El complemento crea una leyenda interactiva en cuyos elementos se puede hacer clic para mostrar/ocultar conjuntos de datos como en el original.
NOTA : aunque tener una leyenda desplazable puede ser útil, tener tantos elementos en una leyenda podría hacer que el gráfico sea ilegible y debería hacer que uno considere representar los datos de una manera diferente, tal vez dividiendo los datos en más gráficos o introduciendo funciones de búsqueda.