饼图是在我的php页面中使用Chart.js实现的。
我希望显示带有数据值的饼图切片以及鼠标悬停在切片上时的工具提示。
我想出了以下代码。
printf( '<table>' );
echo '<tr><td style="text-align: right;"><canvas id="pie-canvas-'
. $canvasId
. '" width=256px height=257px ></canvas></td><td style="text-align: left;width:360px;" id="legend" class="chart-legend"></td></tr>';
echo '<script type="text/javascript">drawPie('
. $canvasId
. ', '
. $data
.', '
. $legend
. ');</script>';
printf( '</table>' );
printf( '<script type="text/javascript" src="extlib/Chart.min.js"></script>' );
printf( '<script type="text/javascript" src="extlib/jquery-min.js"></script>' );
printf( '<script type="text/javascript">' );
?>
function drawPie( canvasId, data, legend )
{
//pie chart for machine status
var canvas = document.getElementById( "pie-canvas-" + canvasId );
var ctx = canvas.getContext( "2d" );
var midX = canvas.width/2;
var midY = canvas.height/2;
var piedata = [];
$.each(data,function(i,val){
piedata.push({value:val.hostStatusCount,color:val.color,label:val.status});
});
var myPieChart = new Chart(ctx).Pie(piedata, {
showTooltips: true,
tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%",
onAnimationProgress: drawSegmentValues
});
var radius = myPieChart.outerRadius;
function drawSegmentValues()
{
//displays segements(number of machines) for each slice of pie in percentage
var length = myPieChart.segments.length;
var totalValue = 0;
for ( var i=0; i < length; i++ )
{
totalValue +=myPieChart.segments[i].value;
}
for( var i=0; i < length; i++ )
{
ctx.fillStyle="black";
var textSize = canvas.width/15;
ctx.font= textSize+"px Verdana";
// Get needed variables
var value = Math.round( ( ( myPieChart.segments[i].value ) / totalValue ) * 100 );
var startAngle = myPieChart.segments[i].startAngle;
var endAngle = myPieChart.segments[i].endAngle;
var middleAngle = startAngle + ( ( endAngle - startAngle ) / 2 );
// Compute text location
var posX = ( radius /1.5 ) * Math.cos( middleAngle ) + midX;
var posY = ( radius/1.5 ) * Math.sin( middleAngle ) + midY;
// Text offside by middle
var w_offset = ctx.measureText( value ).width / 2;
var h_offset = textSize / 4;
ctx.fillText( value+"%", posX - w_offset, posY + h_offset );
}
}
//legend for status
if( legend )
document.getElementById("legend").innerHTML = myPieChart.generateLegend();
}
<?
动画显示数据后,但当切片显示鼠标悬停在工具提示上时,所有切片数据都消失了。
我也尝试了自定义工具提示,但我什么也没做到: - (
如何同时显示两者?。这是饼图片的所有数据始终可见,仅鼠标悬停在工具提示上仅显示在所选切片上。
提前致谢。