0
579
Views¿Cómo agregar los tamaños de los sectores en el gráfico circular (en la parte superior) en Chart.js?
Estoy empezando a aprender la biblioteca chart.js.
Dibujé un gráfico circular (como "pastel"). Cuando pasa el cursor sobre las porciones del diagrama, aparece un número en la ventana emergente que establece el tamaño del sector.
new chart( document.getElementById('diagram_1').getContext('2d'), { type: 'pie', data: { labels: [ 'Завершенная задача', 'Новая задача', 'Ошибка выполнения' ], datasets: [{ label: '# of Votes', data: [@successful_tasks, @new_tasks, @error_tasks], backgroundColor: [ 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(255, 99, 132, 0.2)' ], borderColor: [ 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(255, 99, 132, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } }, responsive: false } } )¿Cómo puede hacer que este número aún se muestre en la parte superior, donde se enumeran los sectores (marqué este lugar con un círculo rojo en la imagen)?
Puedo agregar el número requerido a la matriz de etiquetas
... data: { labels: [ 'Завершенная задача: ' + @successful_tasks, 'Новая задача: ' + @new_tasks, 'Ошибка выполнения: ' + @error_tasks ], ...Pero entonces este número aparecerá dos veces en la información sobre herramientas
·
Juan Pablo Isaza
2 answers
Answer question0
Puede usar el sistema de complementos para esto:
var options = { type: 'pie', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"] }] }, options: { plugins: { customNumber: { textColor: 'red', xOffset: 10, yOffset: 0, font: '24px Comic Sans MS' } } }, plugins: [{ id: 'customNumber', afterDraw: (chart, args, opts) => { const hoveredSlice = chart._active[0]; const { ctx, chartArea: { right } } = chart; if (!hoveredSlice) { return; } ctx.font = opts.font || '24px verdana, sans-serif' ctx.fillStyle = opts.textColor || 'black' const val = chart.data.datasets[hoveredSlice.datasetIndex].data[hoveredSlice.index]; const meassures = ctx.measureText(val); const height = ctx.measureText('M').width; ctx.fillText(val, (right - meassures.width - (opts.xOffset || 0)), height + (opts.yOffset || 0)) } }] } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> </body>
·
Juan Pablo Isaza
Report
0
Encontré la respuesta. Mi proyecto está escrito en CoffeeScript, pero creo que sería más útil para la comunidad de StackOverflow publicar el código en JS.
options: { legend: { labels: { generateLabels: function(chart) { var data = chart.data; if (data.labels.length && data.datasets.length) { return data.labels.map(function(label, i) { var meta = chart.getDatasetMeta(0); var ds = data.datasets[0]; var arc = meta.data[i]; var custom = arc && arc.custom || {}; var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault; var arcOpts = chart.options.elements.arc; var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor); var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor); var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth); var value = chart.config.data.datasets[arc._datasetIndex].data[arc._index]; return { text: label + ": " + value, fillStyle: fill, strokeStyle: stroke, lineWidth: bw, hidden: isNaN(ds.data[i]) || meta.data[i].hidden, index: i }; }); } else { return []; } } } } }
·
Juan Pablo Isaza
Report
Answer question