0
424
VisualizaçõesCómo mostrar k como mil para los valores de chart.js - Javascript
Estoy usando chart.js , quiero mostrar los valores en formato de miles en K
Busqué mucho en Google y descubrí estas respuestas: Cómo mostrar miles en formato k para valores de barra en chart.js
Intenté todas las respuestas publicadas allí, pero nada funcionó para mí. Mi código:
class Analytics { constructor() { this.months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] this.requestGraphData() } async requestGraphData() { try { const response = await fetch("https://duklrtest.ml/API/analyticsGraph") const body = await response.json() const data = body.analyticsGraph this.initChart(data) } catch (error) { console.error(error) } } initChart(data) { const canvas = $('canvas') let datasetsArray = [] const datasets = data.forEach(item => { const { jan, feb, mar, sept, nov, dec, tagName } = item datasetsArray.push({ label: tagName, data: [jan, feb, mar, 0, 0, 0, 0, 0, sept, 0, nov, dec], backgroundColor: [ '#79939f', ], borderColor: [ '#79939f', ], borderWidth: 1 }) }) const graphChart = new Chart(canvas, { type: 'line', data: { labels: this.months, datasets: datasetsArray }, options: { plugins: { datalabels: { formatter: function(context) { return context + "k"; } }, } } }) } } const analytics = new Analytics <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> <canvas></canvas> Aquí está la captura de pantalla donde quiero agregar K :
¿Alguien puede ayudar a resolver esto?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Para usar el complemento de etiquetas de datos, debe incluirlo, no puede simplemente pasar la configuración y esperar que funcione. Para los ticks puedes usar una devolución de llamada
Chart.register(ChartDataLabels) class Analytics { constructor() { this.months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] this.requestGraphData() } async requestGraphData() { try { const response = await fetch("https://duklrtest.ml/API/analyticsGraph") const body = await response.json() const data = body.analyticsGraph this.initChart(data) } catch (error) { console.error(error) } } initChart(data) { const canvas = $('canvas') let datasetsArray = [] const datasets = data.forEach(item => { const { jan, feb, mar, sept, nov, dec, tagName } = item datasetsArray.push({ label: tagName, data: [jan, feb, mar, 0, 0, 0, 0, 0, sept, 0, nov, dec], backgroundColor: [ '#79939f', ], borderColor: [ '#79939f', ], borderWidth: 1 }) }) const graphChart = new Chart(canvas, { type: 'line', data: { labels: this.months, datasets: datasetsArray }, options: { scales: { y: { ticks: { callback: v => `${v}K` } } }, plugins: { tooltip: { callbacks: { label: (ctx) => `${ctx.dataset.label}: ${ctx.formattedValue}K` } }, datalabels: { formatter: function(context) { return context + "k"; } }, } } }) } } const analytics = new Analytics <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <canvas></canvas>
·
Juan Pablo Isaza
Relatório
Responde à pergunta