javascript - Chartjs Doughnut disappears -
i'm having problem chart generation when has 1 info show , holds 360º. here's example:
class="snippet-code-html lang-html prettyprint-override"><!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' ) , info = [ { 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>
just after chart ends 360º animation on android default browser, disapears doesn't happen on chrome. tested on sony xperia (v4.1.2) , samsung s3.
on desktop problem doesn't happen looks it's related default android browser.
i've tested lastest chart.js version 1.0.1-beta.4...
there's open issue on github this.
has solved problem?
after couple of days searching workaround , since didn't response until now, made tests identify minimum supported value work properly. right now, have working on devices mentioned before.
on next illustration there various test values "data" array sense free test them , new ones identify bug.
so here's came with:
class="snippet-code-html lang-html prettyprint-override"><!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 : '' } , info = [] /*, info = [ { value : 0 , color : '#f7464a' , highlight : '#ff5a5e' , label : 'red' } ] , info = [ { value : 1 , color : '#f7464a' , highlight : '#ff5a5e' , label : 'red' } ] , info = [ { value : 0 , color : '#f7464a' , highlight : '#ff5a5e' , label : 'red' } , { value : 0 , color : '#15d42f' , highlight : '#15d42f' , label : 'green' } ] , info = [ { value : 0 , color : '#f7464a' , highlight : '#ff5a5e' , label : 'red' } , { value : 1 , color : '#15d42f' , highlight : '#15d42f' , label : 'green' } ] , info = [ { value : 1 , color : '#f7464a' , highlight : '#ff5a5e' , label : 'red' } , { value : 0 , color : '#15d42f' , highlight : '#15d42f' , label : 'green' } ] , info = [ { value : 1 , color : '#f7464a' , highlight : '#ff5a5e' , label : 'red' } , { value : 2 , color : '#15d42f' , highlight : '#15d42f' , label : 'green' } ] , info = [ { 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' } ] , info = [ { 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 no valid segments, include 2 new ones set value of 1 of them 1 // chart appears. if ( data.length === 0 ) { data.push( $.extend( true, {}, emptysection ) ); data.push( $.extend( true, {}, emptysection ) ); data[ 0 ].value = 1; // if there segments, add together new 1 1 of values: // - 10: if highest value of segment lower lowest allowed (0.001). // - 0.001 of 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 value of new segment. // 0.001% of highest value if it's greater lowest allowed. // if it's not greater lowest allowed, set value big enought other segments don't appear. data[ data.length - 1 ].value = highestvalue > lowestvalue ? determinepercentage( highestvalue ) : 10; } // create chart. chart = new chart( canvas.get( 0 ).getcontext( '2d' ) ).doughnut( data, options ); /** * determines specific percentage of value. if no percentage passed assumes lowest allowed (0.001). */ function determinepercentage( total, percentage ) { percentage = percentage || lowestvalue; homecoming total ? ( parsefloat( total ) * percentage ) / 100 : 0; } </script> </body> </html>
javascript android jquery canvas chart.js
No comments:
Post a Comment