Chartv Donut desaparece

Estoy teniendo un problema con la generación de gráficos cuando tiene sólo un dato para mostrar y mantiene todos los 360º. Aquí está el ejemplo:

<!doctype html> <html> <head> <title>Chart Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.js"></script> </head> <body> <canvas width="200" height="200"></canvas> <script> var canvas = $( 'canvas' ) , data = [ { value : 300, color : "#F7464A", highlight : "#FF5A5E", label : "Red" } ] , options = {"percentageInnerCutout":70,"showTooltips":false,"animateScale":true} , chart = new Chart( canvas.get( 0 ).getContext( '2d' ) ).Doughnut( data, options ); </script> </body> </html>

Justo después de que el gráfico termine la animación de 360º en el navegador predeterminado de Android, desaparece pero no sucede en Chrome. Probado en el Sony Xperia (v4.1.2) y Samsung S3.

En mi escritorio este problema no sucede así que parece que está relacionado con el navegador predeterminado de Android.

También he probado con la última versión de chart.js 1.0.1-beta.4 …

Hay un problema abierto en github para esto.

Ha resuelto alguien este problema?

Después de un par de días buscando una solución para esto y ya que no recibí ninguna respuesta hasta ahora, he hecho algunas pruebas para identificar el valor mínimo soportado para que funcione correctamente. En este momento, lo tengo trabajando en los dispositivos mencionados anteriormente.

En el siguiente ejemplo hay varios valores de prueba para la matriz "data", así que siéntete libre de probarlos y otros nuevos para identificar cualquier error.

Así que aquí está lo que me ocurrió:

 <!doctype html> <html> <head> <title>Chart Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.js"></script> </head> <body> <canvas width="300" height="300"></canvas> <script> var canvas = $( 'canvas' ) , lowestValue = 0.001 // Minimum supported value , highestValue = 0 , emptySection = { value : lowestValue , color : '#e8e8e8' , highlight : '#e8e8e8' , label : '' } , data = [] /*, data = [ { value : 0 , color : '#F7464A' , highlight : '#FF5A5E' , label : 'Red' } ] , data = [ { value : 1 , color : '#F7464A' , highlight : '#FF5A5E' , label : 'Red' } ] , data = [ { value : 0 , color : '#F7464A' , highlight : '#FF5A5E' , label : 'Red' } , { value : 0 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } ] , data = [ { value : 0 , color : '#F7464A' , highlight : '#FF5A5E' , label : 'Red' } , { value : 1 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } ] , data = [ { value : 1 , color : '#F7464A' , highlight : '#FF5A5E' , label : 'Red' } , { value : 0 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } ] , data = [ { value : 1 , color : '#F7464A' , highlight : '#FF5A5E' , label : 'Red' } , { value : 2 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } ] , data = [ { value : 0.000001 , color : '#F7464A' , highlight : '#FF5A5E' , label : 'Red' } , { value : 0.0058 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } , { value : 1 , color : '#FAEC23' , highlight : '#FAEC23' , label : 'Yellow' } ] , data = [ { value : 0.00 , color : '#F7464A' , highlight : '#FF5A5E' , label : 'Red' } , { value : 0.00 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } , { value : 0.00 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } , { value : 0.00 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } , { value : 0.00 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } , { value : 0.00 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } , { value : 0.00 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } , { value : 0.00 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } , { value : 0.00 , color : '#15D42F' , highlight : '#15D42F' , label : 'Green' } , { value : 1 , color : '#FAEC23' , highlight : '#FAEC23' , label : 'Yellow' } ]*/ , options = { 'percentageInnerCutout': 70 , 'showTooltips' : false , 'animateScale' : true } , chart = {}; // If there are no valid segments, include two new ones an set the value of one of them to 1 // so that the chart appears. if ( data.length === 0 ) { data.push( $.extend( true, {}, emptySection ) ); data.push( $.extend( true, {}, emptySection ) ); data[ 0 ].value = 1; // Even if there are segments, we add a new one with one of the values: // - 10: if the highest value of any segment is lower that the lowest allowed (0.001). // - 0.001 of the highest value } else { $.each( data, function( index, el ) { el.value = el.value < lowestValue ? lowestValue : el.value; highestValue = el.value > highestValue ? el.value : highestValue; }); data.push( $.extend( true, {}, emptySection ) ); // Set the value of the new segment. // Get 0.001% of the highest value if it's greater that the lowest allowed. // If it's not greater that the lowest allowed, set it to a value big enought so the other segments don't appear. data[ data.length - 1 ].value = highestValue > lowestValue ? determinePercentage( highestValue ) : 10; } // Create the chart. chart = new Chart( canvas.get( 0 ).getContext( '2d' ) ).Doughnut( data, options ); /** * Determines a specific percentage of a value. If no percentage is passed it assumes the lowest allowed (0.001). */ function determinePercentage( total, percentage ) { percentage = percentage || lowestValue; return total ? ( parseFloat( total ) * percentage ) / 100 : 0; } </script> </body> </html>