如何使用 chart.js 同时显示饼图切片数据和工具提示

Question

我们可以使用 chart.js 在饼图切片和 tolltip 中显示数据吗？chart.js

已更新：

这是我在 php 页面中的代码。

            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});
    });

    Chart.types.Pie.extend({
        name: "PieAlt",
        draw: function(){
            Chart.types.Pie.prototype.draw.apply(this, arguments);
            drawSegmentValues(this)
        }
    });
    var myPieChart = new Chart(ctx).PieAlt(piedata, {
        showTooltips: true,
        tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%"

    });

    var radius = myPieChart.outerRadius;

    function drawSegmentValues(myPieChart)
    {
    //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();
}
<?

当鼠标移动到饼图切片中的数据时，从其位置移动。如何解决？

Answer 1

扩展图表并将您的 drawSegmentValues 移动到 draw 覆盖内，就像这样

Chart.types.Pie.extend({
  name: "PieAlt",
  draw: function(){
    Chart.types.Pie.prototype.draw.apply(this, arguments);
    drawSegmentValues(this)
  }
});

然后使用PieAlt

var myPieChart = new Chart(ctx).PieAlt(data, {
  showTooltips: true,
  tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%"
});

并稍微修改drawSegmentValues函数

function drawSegmentValues(myPieChart)
{
  var radius = myPieChart.outerRadius
  ...

更新

如果标签移动有问题，请设置上下文 textAlign 和 textBaseline 属性，像这样

...
ctx.font = textSize + "px Verdana";
ctx.textAlign = "start";
ctx.textBaseline = "bottom";
...

如何使用 chart.js 同时显示饼图切片数据和工具提示

How to display pie slice data and tooltip together using chart.js

pie-chart

chart.js