Come aggiungere testo all’interno del grafico ad anello usando Chart.js?

Come rendere il testo all’interno del grafico ad anello , sto usando ChartJs .

Devi modificare il codice come: in chart.Doughnut.defaults

 labelFontFamily : "Arial", labelFontStyle : "normal", labelFontSize : 24, labelFontColor : "#666" 

e poi in funzione drawPieSegments

ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);

Vedi questo pull: https://github.com/nnnick/Chart.js/pull/35

ecco un violino http://jsfiddle.net/mayankcpdixit/6xV78/ che implementa lo stesso.

Nessuna delle altre risposte ridimensiona il testo in base alla quantità di testo e alla dimensione della ciambella. Ecco un piccolo script che puoi utilizzare per posizionare in modo dinamico qualsiasi quantità di testo nel mezzo e la ridimensiona automaticamente. http://jsfiddle.net/nkzyx50o/

Ciambella con testo dinamico in mezzo

Ci vorrà qualsiasi quantità di testo nella dimensione perfetta per la ciambella. Per evitare di toccare i bordi, puoi impostare un riempimento laterale come percentuale del diametro dell’interno del cerchio. Se non lo imposti, verrà impostato automaticamente su 20. Hai anche il colore, il carattere e il testo. Il plugin si prende cura del resto.

Il codice del plugin inizierà con una dimensione del font di base di 30px. Da lì controllerà la larghezza del testo e lo confronterà con il raggio del cerchio e lo ridimensionerà in base al rapporto larghezza cerchio / testo.

Questo è il codice del plugin

  Chart.pluginService.register({ beforeDraw: function (chart) { if (chart.config.options.elements.center) { //Get ctx from string var ctx = chart.chart.ctx; //Get options from the center object in options var centerConfig = chart.config.options.elements.center; var fontStyle = centerConfig.fontStyle || 'Arial'; var txt = centerConfig.text; var color = centerConfig.color || '#000'; var sidePadding = centerConfig.sidePadding || 20; var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2) //Start with a base font of 30px ctx.font = "30px " + fontStyle; //Get the width of the string and also the width of the element minus 10 to give it 5px side padding var stringWidth = ctx.measureText(txt).width; var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated; // Find out how much the font can grow in width. var widthRatio = elementWidth / stringWidth; var newFontSize = Math.floor(30 * widthRatio); var elementHeight = (chart.innerRadius * 2); // Pick a new font size so it will not be larger than the height of label. var fontSizeToUse = Math.min(newFontSize, elementHeight); //Set font settings to draw it correctly. ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2); var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2); ctx.font = fontSizeToUse+"px " + fontStyle; ctx.fillStyle = color; //Draw text in center ctx.fillText(txt, centerX, centerY); } } }); 

E tu usi le seguenti opzioni nell’object grafico

 options: { elements: { center: { text: 'Desktop', color: '#36A2EB', //Default black fontStyle: 'Helvetica', //Default Arial sidePadding: 15 //Default 20 (as a percentage) } } } 

Qui viene ripulito e combinato l’esempio delle soluzioni di cui sopra – reattivo (prova a ridimensionare la finestra), supporta l’autoallineamento dell’animazione, supporta i suggerimenti

https://jsfiddle.net/cmyker/u6rr5moq/

 Chart.types.Doughnut.extend({ name: "DoughnutTextInside", showTooltip: function() { this.chart.ctx.save(); Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments); this.chart.ctx.restore(); }, draw: function() { Chart.types.Doughnut.prototype.draw.apply(this, arguments); var width = this.chart.width, height = this.chart.height; var fontSize = (height / 114).toFixed(2); this.chart.ctx.font = fontSize + "em Verdana"; this.chart.ctx.textBaseline = "middle"; var text = "82%", textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2), textY = height / 2; this.chart.ctx.fillText(text, textX, textY); } }); var data = [{ value: 30, color: "#F7464A" }, { value: 50, color: "#E2EAE9" }, { value: 100, color: "#D4CCC5" }, { value: 40, color: "#949FB1" }, { value: 120, color: "#4D5360" }]; var DoughnutTextInsideChart = new Chart($('#myChart')[0].getContext('2d')).DoughnutTextInside(data, { responsive: true }); 
        

Eviterei di modificare il codice chart.js per ottenere questo risultato, dato che è piuttosto semplice con i normali CSS e HTML. Ecco la mia soluzione:

HTML:

  
47 / 60 st
(30 / 25 st)

CSS:

 .donut-inner { margin-top: -100px; margin-bottom: 100px; } .donut-inner h5 { margin-bottom: 5px; margin-top: 0; } .donut-inner span { font-size: 12px; } 

L’output è simile a questo:

inserisci la descrizione dell'immagine qui

Funziona anche alla mia fine …

 
99%
Total

inserisci la descrizione dell'immagine qui

Base su @ rap-2-h risposta, Qui il codice per l’utilizzo del testo sul grafico ad anello su Chart.js per l’utilizzo in dashboard come. Ha un carattere dinamico per l’opzione retriggers.

HTML:

 
text

script:

 var doughnutData = [ { value: 100, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }, { value: 50, color: "#CCCCCC", highlight: "#5AD3D1", label: "Green" } ]; $(document).ready(function(){ var ctx = $('#chart-area').get(0).getContext("2d"); var myDoughnut = new Chart(ctx).Doughnut(doughnutData,{ animation:true, responsive: true, showTooltips: false, percentageInnerCutout : 70, segmentShowStroke : false, onAnimationComplete: function() { var canvasWidthvar = $('#chart-area').width(); var canvasHeight = $('#chart-area').height(); //this constant base on canvasHeight / 2.8em var constant = 114; var fontsize = (canvasHeight/constant).toFixed(2); ctx.font=fontsize +"em Verdana"; ctx.textBaseline="middle"; var total = 0; $.each(doughnutData,function() { total += parseInt(this.value,10); }); var tpercentage = ((doughnutData[0].value/total)*100).toFixed(2)+"%"; var textWidth = ctx.measureText(tpercentage).width; var txtPosx = Math.round((canvasWidthvar - textWidth)/2); ctx.fillText(tpercentage, txtPosx, canvasHeight/2); } }); }); 

Ecco l’esempio code.try per ridimensionare la finestra. http://jsbin.com/wapono/13/edit

Questo è basato sull’aggiornamento di Cmyker per Chart.js 2. (pubblicato come un’altra risposta poiché non posso ancora commentare)

Ho riscontrato un problema con l’allineamento del testo su Chrome quando viene visualizzata la legenda in quanto l’altezza del grafico non include questo, pertanto non è allineato correttamente nel mezzo. Risolto questo problema rendendolo conto nel calcolo di fontSize e textY.

Ho calcolato la percentuale all’interno del metodo piuttosto che un valore impostato poiché ne ho molti di questi nella pagina. Ipotesi sono che il tuo grafico abbia solo 2 valori (altrimenti qual è la percentuale di? E che il primo è quello per cui vuoi mostrare la percentuale. Ho un mucchio di altri grafici anche io quindi faccio un controllo per type = ciambella. Uso solo le ciambelle per mostrare le percentuali, quindi funziona per me.

Il colore del testo sembra un po ‘approssimativo a seconda dell’ordine in cui vengono eseguite le cose, ecc. Quindi mi sono imbattuto in un problema quando ridimensionavo il testo che avrebbe cambiato colore (tra nero e colore primario in un caso, e colore secondario e bianco in un altro) quindi Io “salvo” qualunque fosse lo stile di riempimento esistente, disegna il testo (nel colore dei dati primari), quindi ripristina il vecchio stile di riempimento. (Conservare il vecchio stile di riempimento non sembra necessario ma non si sa mai.)

https://jsfiddle.net/g733tj8h/

 Chart.pluginService.register({ beforeDraw: function(chart) { var width = chart.chart.width, height = chart.chart.height, ctx = chart.chart.ctx, type = chart.config.type; if (type == 'doughnut') { var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) / (chart.config.data.datasets[0].data[0] + chart.config.data.datasets[0].data[1])); var oldFill = ctx.fillStyle; var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2); ctx.restore(); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle" var text = percent + "%", textX = Math.round((width - ctx.measureText(text).width) / 2), textY = (height + chart.chartArea.top) / 2; ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[0]; ctx.fillText(text, textX, textY); ctx.fillStyle = oldFill; ctx.save(); } } }); 
 var data = { labels: ["Red","Blue"], datasets: [ { data: [300, 50], backgroundColor: ["#FF6384","#36A2EB"], }] }; Chart.pluginService.register({ beforeDraw: function(chart) { var width = chart.chart.width, height = chart.chart.height, ctx = chart.chart.ctx, type = chart.config.type; if (type == 'doughnut') { var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) / (chart.config.data.datasets[0].data[0] + chart.config.data.datasets[0].data[1])); var oldFill = ctx.fillStyle; var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2); ctx.restore(); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle" var text = percent + "%", textX = Math.round((width - ctx.measureText(text).width) / 2), textY = (height + chart.chartArea.top) / 2; ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[0]; ctx.fillText(text, textX, textY); ctx.fillStyle = oldFill; ctx.save(); } } }); var myChart = new Chart(document.getElementById('myChart'), { type: 'doughnut', data: data, options: { responsive: true, legend: { display: true } } }); 
   

Puoi anche incollare il codice di onAnimationComplete nell’opzione onAnimationComplete :

 // ... var myDoughnutChart = new Chart(ctx).Doughnut(data, { onAnimationComplete: function() { ctx.fillText(data[0].value + "%", 100 - 20, 100, 200); } }); 

Il testo verrà mostrato dopo l’animazione

Creo una demo con 7 jQueryUI Slider e ChartJs (con testo dinamico all’interno)

 Chart.types.Doughnut.extend({ name: "DoughnutTextInside", showTooltip: function() { this.chart.ctx.save(); Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments); this.chart.ctx.restore(); }, draw: function() { Chart.types.Doughnut.prototype.draw.apply(this, arguments); var width = this.chart.width, height = this.chart.height; var fontSize = (height / 140).toFixed(2); this.chart.ctx.font = fontSize + "em Verdana"; this.chart.ctx.textBaseline = "middle"; var red = $( "#red" ).slider( "value" ), green = $( "#green" ).slider( "value" ), blue = $( "#blue" ).slider( "value" ), yellow = $( "#yellow" ).slider( "value" ), sienna = $( "#sienna" ).slider( "value" ), gold = $( "#gold" ).slider( "value" ), violet = $( "#violet" ).slider( "value" ); var text = (red+green+blue+yellow+sienna+gold+violet) + " minutes"; var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2); var textY = height / 2; this.chart.ctx.fillStyle = '#000000'; this.chart.ctx.fillText(text, textX, textY); } }); var ctx = $("#myChart").get(0).getContext("2d"); var myDoughnutChart = new Chart(ctx).DoughnutTextInside(data, { responsive: false }); 

DEMO IN JSFIDDLE

inserisci la descrizione dell'immagine qui

@ rap-2-h e @Ztuons La risposta di Ch non consente l’opzione showTooltips di essere triggers, ma ciò che si può fare è creare e sovrapporre un secondo object di canvas dietro a quello che mostra il grafico.

La parte più importante è lo styling richiesto nei div e per l’object canvas stesso in modo che vengano visualizzati uno sopra l’altro.

 var data = [ {value : 100, color : 'rgba(226,151,093,1)', highlight : 'rgba(226,151,093,0.75)', label : "Sector 1"}, {value : 100, color : 'rgba(214,113,088,1)', highlight : 'rgba(214,113,088,0.75)', label : "Sector 2"}, {value : 100, color : 'rgba(202,097,096,1)', highlight : 'rgba(202,097,096,0.75)', label : "Sector 3"} ] var options = { showTooltips : true }; var total = 0; for (i = 0; i < data.length; i++) { total = total + data[i].value; } var chartCtx = $("#canvas").get(0).getContext("2d"); var chart = new Chart(chartCtx).Doughnut(data, options); var textCtx = $("#text").get(0).getContext("2d"); textCtx.textAlign = "center"; textCtx.textBaseline = "middle"; textCtx.font = "30px sans-serif"; textCtx.fillText(total, 150, 150); 
     

Puoi usare css con posizionamento relativo / assoluto se vuoi che risponda. Inoltre può gestire facilmente la multi-linea.

https://jsfiddle.net/mgyp0jkk/

 

Some text

Some text

@Cmyker, ottima soluzione per chart.js v2

Un piccolo miglioramento: ha senso verificare l’id della canvas appropriata, vedere lo snippet modificato di seguito. Altrimenti il ​​testo (cioè il 75%) viene anche visualizzato a metà degli altri tipi di grafici all’interno della pagina.

  Chart.pluginService.register({ beforeDraw: function(chart) { if (chart.canvas.id === 'doghnutChart') { let width = chart.chart.width, height = chart.chart.outerRadius * 2, ctx = chart.chart.ctx; rewardImg.width = 40; rewardImg.height = 40; let imageX = Math.round((width - rewardImg.width) / 2), imageY = (height - rewardImg.height ) / 2; ctx.drawImage(rewardImg, imageX, imageY, 40, 40); ctx.save(); } } }); 

Poiché una legenda (vedi: http://www.chartjs.org/docs/latest/configuration/legend.html ) ingrandisce l’altezza del grafico, il valore per l’altezza deve essere ottenuto dal raggio.

Prima di tutto, i complimenti sulla scelta di Chart.js! Lo sto utilizzando in uno dei miei progetti attuali e lo adoro assolutamente – fa perfettamente il lavoro.

Sebbene le etichette / i suggerimenti non siano ancora parte della libreria, potresti dare un’occhiata a queste tre richieste di pull:

  • Tooltips
  • Aggiunte etichette ai grafici a torta
  • Aggiunte le etichette di base al grafico a torta

E, come accennato da Cracker0dks , Chart.js utilizza il canvas per il rendering, quindi potresti anche implementare le tue descrizioni dei comandi interagendo direttamente con esso.

Spero che questo ti aiuti.