如何使用chart.js一起显示饼图数据和工具提示 [英] How to display pie slice data and tooltip together using chart.js

问题描述

我们可以使用chart.js在饼图切片中显示数据，还是在收费提示中显示如上图所示?

Can we display data in pie chart slice and also tolltip like the above image using chart.js?

已更新:

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

Here is my code in php page.

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

当鼠标悬停在饼图中的数据从其位置移动时. 该如何解决?

When mouse over the data in pie slice moved from its position. How to solve this?

推荐答案

扩展图表并将drawSegmentValues移至draw替代内部，就像这样

Extend the chart and move your drawSegmentValues to inside the draw override, like so

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属性，例如

If you have a problem with the labels moving set the context textAlign and textBaseline properties, like so

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

这篇关于如何使用chart.js一起显示饼图数据和工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！