0
300
Viewschart 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 answers
Answer question0
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!' ] ]