0
304
Vistaschart js 3 radar, cómo habilitar etiquetas multilínea
Estoy usando chart js 3 para dibujar un gráfico de radar.
Recibo etiquetas de texto del backend.
Estoy tratando de hacer que las etiquetas respondan y aplicar líneas múltiples y palabras de ajuste.
Mi configuración actual es:
const myChart = new Chart(ctx, { type: "radar", data: { labels: labels, datasets: [ ...Agregué una lista de opciones para hacer que el gráfico responda y para darle un estilo personalizado:
options: { scales: { r: { pointLabels: { font: { fontSize: 14, fontFamily: "Roboto", }, }, }, }, maintainAspectRatio: false, responsive: true, layout: { padding: 0, }, tooltips: { enabled: false, }, plugins: { title: { display: false, text: "Les évaluations", }, legend: { display: false, }, }, },Estoy obteniendo este gráfico:
No puedo encontrar opciones para habilitar etiquetas multilínea o para aplicar ajuste al texto
2 Respuestas
Responde la pregunta0
Puede definir las labels como una matriz de matrices de cadenas.
Esto se describe en la documentación de Chart.js en Estructuras de datos de la siguiente manera: "En caso de que desee etiquetas de varias líneas, puede proporcionar una matriz con cada línea como una entrada en la matriz".
Eche un vistazo al fragmento de código ejecutable a continuación y vea cómo funciona.
new Chart('myChart', { type: 'radar', data: { labels: [['Deep', 'Red'], ['Nice', 'Blue'], ['Cute', 'Yellow']], datasets: [{ label: 'My Dataset', data: [300, 250, 280], borderColor: '#FF6384' }] }, options: { responsive: false } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> <canvas id="myChart" height="200"></canvas>0
En realidad, sus labels de variables son una matriz que contiene cadenas de esta manera: ["Je note la qualité du pitch...", "Je donne ma voix pour sélectionner cette startup, sous réserve"]
Lo que tienes que hacer es hacer una matriz 2D que contenga tus mismas oraciones pero divididas en una submatriz así: [["Je note la qualité", "du pitch..."], ["Je donne ma voix", "pour sélectionner", "cette startup, sous réserve"]]
Al hacer esto, debe tener oraciones de varias líneas, para dividir su cadena en varias cadenas (fragmentos), aquí hay una implementación rápida: const newLabels = labels.map(l => l.match(/.{1,n}/g)) donde n es su longitud máxima por línea.
Si desea dividir su cadena por número de palabras, pruebe esta implementación de fragmentación:
const splitString = (text, chunkSize) => { const arr = text.split(" ") const output = [] for (let i = 0, length = arr.length; i < length; i += chunkSize) { output.push(arr.slice(i, i + chunkSize)) } return output } console.log(splitString("Hi this is a sample string that I would like to break down into an array!", 3))Deberías obtener esto:
[ [ 'Hi', 'this', 'is' ], [ 'a', 'sample', 'string' ], [ 'that', 'I', 'would' ], [ 'like', 'to', 'break' ], [ 'down', 'into', 'an' ], [ 'array!' ] ]