En mi código a continuación, puedo dibujar un Treemap y también mostrar la etiqueta en cada celda del árbol. Pero quiero agregar un texto personalizado junto a mi etiqueta,
Por ejemplo, quiero que aparezca la palabra 'Idioma' en cada celda del mapa de árbol. Probé las opciones del formateador, pero no funciona para la versión de chart.js que estoy usando. Tenga la amabilidad de proporcionarme una solución para la versión específica que estoy usando. Como tengo muchos otros gráficos definidos y cambiar la versión causaría problemas.
var topTags = [ {tag:'android',num:42657},{tag:'reactjs',num:38844},{tag:'php',num:34381},{tag:'sql',num:29996}, ]; var canvas = document.getElementById("treemap"); var ctx = canvas.getContext("2d"); var chart = window.chart = new Chart(ctx, { type: "treemap", data: { datasets: [{ tree: topTags, key: "num", groups: ['tag'], spacing: 0.5, borderWidth: 1.5, fontColor: "black", borderColor: "grey" }] }, options: { maintainAspectRatio: false, legend: { display: false }, tooltips: { enabled: false } } });VERSIÓN CHART.JS Y TREEMAP:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>La opción de formateador solo se agregó en la versión 2 del tipo de gráfico de mapa de árbol, la opción programable solo está disponible en la versión 1, por lo que la mejor manera de obtener el texto adicional es editar primero su matriz de datos original y agregarle el texto que manera así:
let topTags = [{ tag: 'android', num: 42657 }, { tag: 'reactjs', num: 38844 }, { tag: 'php', num: 34381 }, { tag: 'sql', num: 29996 }, ]; topTags = topTags.map(e => ({ num: e.num, tag: `Lang: ${e.tag}` })) const canvas = document.getElementById("chart"); const ctx = canvas.getContext("2d"); const chart = window.chart = new Chart(ctx, { type: "treemap", data: { datasets: [{ tree: topTags, key: "num", groups: ['tag'], spacing: 0.5, borderWidth: 1.5, fontColor: "black", borderColor: "grey", }] }, options: { maintainAspectRatio: false, legend: { display: false }, tooltips: { enabled: false } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script> <canvas id="chart"></canvas>