Sér*_*gio 5 javascript jquery android canvas chart.js
我在生成图表时遇到了问题，因为它只有一个数据要显示并保持所有 360 度。这是示例：
<!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>图表在 Android 默认浏览器上结束 360º 动画后，它会消失，但不会在 Chrome 上发生。在 Sony Xperia (v4.1.2) 和 Samsung S3 上测试。
在我的桌面上，这个问题不会发生，所以看起来它与默认的 Android 浏览器有关。
我还测试了最新的chart.js版本 1.0.1-beta.4 ...
github 上有一个未解决的问题。
有没有人解决过这个问题？
经过几天的寻找解决方法后，由于直到现在我还没有得到任何回复，我做了一些测试来确定它正常工作的最小支持值。现在，我可以在前面提到的设备上运行它。
在下面的示例中，“数据”数组有各种测试值，因此请随意测试它们和新值以识别任何错误。
所以这就是我想出的：
<!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>| 归档时间： |
|
| 查看次数： |
1184 次 |
| 最近记录： |