Chartjs甜甜圈消失

我在生成圖表時遇到問題，它只有一個數據顯示並保存所有360º。這裏的例子：圖表結束在Android默認瀏覽器的360º動畫Chartjs甜甜圈消失

剛過

<!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>

，它在前看不見，但它不會在Chrome的發生。在索尼Xperia（v4.1.2）和三星S3上進行測試。

在我的桌面上，這個問題沒有發生，所以它看起來像它與默認的Android瀏覽器。

我也接觸到最新的版本chart.js 1.0.1-beta.4測試...

有GitHub上一個open issue這一點。

有沒有人解決過這個問題？

來源

2014-10-16 Sérgio

當你說任何舊的瀏覽器，你的意思是哪些？這可以在桌面瀏覽器上重現嗎？ – Quince 2014-10-16 10:35:06

這工作得很好firefox 23 – Quince 2014-10-16 10:56:51

它也似乎是一個問題上Safari Mac – 2014-10-16 14:13:30

經過幾天尋找解決方法，並且由於直到現在我還沒有得到任何響應，我做了一些測試以確定它能夠正常工作的最小支持值。現在，我已經開始使用前面提到的設備。

在以下示例中，「數據」數組有多種測試值，因此可以隨意測試它們，並用新的來識別任何錯誤。

所以這裏就是我想出了：

<!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: 
 
     // \t - 10: if the highest value of any segment is lower that the lowest allowed (0.001). 
 
     // \t - 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; 
 
\t \t \t \t } 
 

 
     // 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>

來源

2014-10-17 14:55:18

Chartjs甜甜圈消失

回答

相關問題