如何在Chart.js饼图上移动标签的位置 [英] How to move labels' position on Chart.js pie

问题描述

我正在使用Chart.js，并且试图将饼图上的标签移到饼图区域之外(请参见红色的X):

I'm using Chart.js and I'm trying to move the labels on my Pie chart outside of the pie area (see red X's):

这是我现在的代码:

<div class="container" id="pieContainer">
    <h4 class="title">Title</h4>
    <center><canvas id="pie"></canvas></center>
</div>

<script>                                  
    var pieData = [
    {
        value: 39,
        color:"#335478",
        label: "Blue"
    },
    {
        value : 4,
        color : "#7f7f7f",
        label: "Grey"
    },
    {
        value : 57,
        color : "#99cb55",
        label: "Green"
    }
    ];

    var optionsPie = {
        responsive : true,
        tooltipEvents: [],
        showTooltips: true,
        onAnimationComplete: function() {
             this.showTooltip(this.segments, true);
        },
        tooltipTemplate: "<%= label %> - <%= value %>%"
    };
    new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData, optionsPie);
</script>

我不想使用图例，也找不到用于移动标签的内置方法.有没有一种方法可以在不更改chart.js的情况下进行操作?实现目标的最佳方法是什么?

I don't want to use legends and I couldn't find a built-in method to move labels. Is there a way to do that without changing chart.js? What's the best way to achieve my goal?

推荐答案

只需扩展图表即可.如果您的标签是静态的，则只需更改tooltipPosition方法可能会更简单.

Just extend the chart to do this. If your labels are static, it might be simpler to just change the tooltipPosition method instead.

预览

脚本

Chart.types.Pie.extend({
    name: "PieAlt",
    initialize: function(data){
        Chart.types.Pie.prototype.initialize.apply(this, arguments);

        var requiredSpace = 0;
        for (var i = 0; i < data.length; i++)
            requiredSpace = Math.max(ctx.measureText(Chart.helpers.template(this.options.tooltipTemplate, data[i])).width, requiredSpace);
        this.outerRadius -= (requiredSpace + 20);
    },
    draw: function(data){
        Chart.types.Pie.prototype.draw.apply(this, arguments);

        var self = this;
        ctx.save();
        ctx.font = Chart.helpers.fontString(self.options.scaleFontSize, self.options.scaleFontStyle, self.options.scaleFontFamily);
                ctx.textBaseline = "middle";
        self.segments.forEach(function (segment) {
            var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
                x: this.chart.width / 2,
                y: this.chart.height / 2,
                startAngle: segment.startAngle,
                endAngle: segment.endAngle,
                outerRadius: segment.outerRadius * 2 + 20,
                innerRadius: 0
            })

            var normalizedAngle = (segment.startAngle + segment.endAngle) / 2;
            while (normalizedAngle > 2 * Math.PI) {
                normalizedAngle -= (2 * Math.PI)
            }

            if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5))
                ctx.textAlign = "start";
            else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) {
                outerEdge.y += 5;
                ctx.textAlign = "center";
            }
            else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) {
                outerEdge.y - 5;
                ctx.textAlign = "center";
            }
            else
                ctx.textAlign = "end";

            ctx.fillText(Chart.helpers.template(self.options.tooltipTemplate, segment), outerEdge.x, outerEdge.y);
        });

        ctx.restore();
    }
});

然后

new Chart(ctx).PieAlt(data, {
    showTooltips: false
});

---

小提琴- http://jsfiddle.net/h8rggkhp/

这篇关于如何在Chart.js饼图上移动标签的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！