Il grafico a torta Highcharts ignora la percentuale di suggerimenti dei parametri e ha un problema di inesattezza in virgola mobile

Question

Highcharts 3.0 sembra avere problemi di accuratezza del numero in virgola mobile durante la visualizzazione delle descrizioni comandi su un grafico a torta. Sono stato in grado di ricreare l'errore esatto utilizzando uno dei grafici a torta demo highcharts - Pie with Legend. Clicca su "Modifica in JsFiddle" per modificare il javascript.

All'interno del pannello JavaScript, cercare la sezione serie e dati. Conserva i dati di Firefox e IE e scarta il resto dei dati, così possiamo concentrarci su solo 2 fette di torta. I due blocchi di dati non hanno percentuali che aggiungono fino a 100, quindi i grafici ad alta percentuale ricalcoleranno le percentuali per noi. Fare clic sul pulsante Esegui in alto, passare il mouse sulle fette, le percentuali sono molto accurate con il numero massimo di decimali. Ma aspetta, guarda l'opzione tooltip di javascript, highcharts sta chiaramente ignorando l'impostazione "percentualeDecimali: 1". Questo è il numero 1.

Ora cerchiamo di modificare manualmente le percentuali di dati come segue: [ 'Firefox', 57,7], [ 'IE', 42,3] in modo che non aggiungere fino a esattamente 100,0. Premi nuovamente il pulsante Esegui, i tooltips delle sezioni visualizzano 'Firefox: 57.0000000000001%' e 'IE: 42.3%'. Sembra che sia stato eseguito un ricalcolo della percentuale, a prescindere dal fatto che le percentuali ammontino a 100 o meno, introducendo in questo caso una piccola inesattezza in virgola mobile. Questo è il numero 2. Se l'arrotondamento "percentualeDecimali" avesse funzionato in questo caso, questo problema avrebbe potuto essere mascherato.

Mi piacerebbe sapere: * Qualcun'altro ha visto lo stesso problema e ha una sorta di soluzione? * I highcharts possono rispondere a questi problemi e farci sapere se sono noti bug?

Answer 1

Rispondere a questa domanda in base a commento di Billy Reverb:

basta sostituire questo attributi:

tooltip: { 
    pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
    percentageDecimals: 1 
} 

per questo:

tooltip: { 
    formatter: function() { 
        return this.point.name + ': <b>' + Highcharts.numberFormat(this.percentage, 1) + '%</b>'; 
       } 
} 

Answer 2

Una soluzione più semplice è quella di utilizzare

{point.percentage:.1f}% 

nella stringa pointFormat

Answer 3

Per me la soluzione upvoted non ha funzionato:

tooltip: { 
    formatter: function() { 
        return this.point.name + ': <b>' + Highcharts.numberFormat(this.percentage, 1) + '%</b>'; 
       } 
} 

ma questo ha fatto:

this.percentage.toFixed(1) 

Answer 4

Prima di andare testa-desk-testa-desk, durante il tentativo per formattare la percentuale.

Ecco alcuni modi per farlo:

1. (Math.round(this.point.percentage*100)/100) + ' %'
2. Highcharts.numberFormat(this.percentage, 1) + '%'
3. this.percentage.toFixed(1)
4. {point.percentage}% or {point.percentage:.1f}%

Io uso spesso # 4 nelle descrizioni comandi e le etichette e quando non si utilizza una funzione di formattazione personalizzata.