Javascript Chart.js始终可见标签

我正在为一个客户重新编写一个应用程序，他们想要显示一个图表。他们目前使用基础设施图表，他们希望停止使用，但布局必须保持不变

这是他们想要的布局（因此标签应该是可见的，单个条，…）

因此，我的第一个选择是尝试Chart.js，但我只能得到如下结果：

因此，基本上唯一需要做的事情就是始终显示标签

数据是通过角度提供的，如果是整数，则只是一个数组。对图表使用以下指令：

我当前的html：

<canvas id="polar" class="chart chart-polar-area" data="data.values" labels="data.labels" width="200" height="200"
        options="{animateRotate: false}"></canvas>

我发现了这个；但是我无法让它工作

基于

---

预览

---

将上面的图表转换为角度图表很容易，因为我们只设置了选项。但是，我们需要做两个小的更改（即设置

中的图表和ctx变量）

// THIS IS REQUIRED AND WAS ADDED
tooltipEvents: [],
onAnimationComplete: function () {
    // THESE 2 LINES ARE NEW
    var chart = this.chart;
    var ctx = this.chart.ctx;

    this.segments.forEach(function (segment) {
        var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
            // THESE 2 LINES WERE CHANGED
            x: chart.width / 2,
            y: chart.height / 2,
            startAngle: segment.startAngle,
            endAngle: segment.endAngle,
            outerRadius: segment.outerRadius * 2 + 10,
            innerRadius: 0
        })
    ...

---

假设包含库脚本，则整个代码如下所示

HTML

<div ng-app="myApp">
    <div ng-controller="myController">
        <canvas id="polar-area" class="chart chart-polar-area" data="data" labels="labels" options="options"></canvas>
    </div>
</div>

脚本

angular.module('myApp', ["chart.js"]);
angular.module('myApp').controller('myController', function ($scope) {
        $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
        $scope.data = [300, 500, 100, 40, 120];
        $scope.options = {
            scaleOverride: true,
            scaleStartValue: 0,
            scaleStepWidth: 40,
            scaleSteps: 10,
            tooltipEvents: [],
            onAnimationComplete: function () {
                var chart = this.chart;
                var ctx = this.chart.ctx;

                this.segments.forEach(function (segment) {
                    var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
                        x: chart.width / 2,
                        y: chart.height / 2,
                        startAngle: segment.startAngle,
                        endAngle: segment.endAngle,
                        outerRadius: segment.outerRadius * 2 + 10,
                        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(segment.label, outerEdge.x, outerEdge.y);
                })
            }
        }
    }
);

angular.module（'myApp'，[“chart.js]”）；
角度.module（'myApp'）.controller（'myController'，function（$scope）{
$scope.labels=[“下载销售”、“店内销售”、“邮购销售”、“电话销售”、“公司销售”]；
$scope.data=[30050010040120]；
$scope.options={
scaleOverride：对，
scaleStartValue:0，
刻度宽度：40，
比例：10，
工具管道事件：[]，
onAnimationComplete:函数（）{
var chart=this.chart；
var ctx=this.chart.ctx；
this.segments.forEach（函数（段）{
var outerEdge=Chart.Arc.prototype.tooltipPosition.apply({
x:chart.width/2，
y：图表高度/2，
startAngle:segment.startAngle，
endAngle:segment.endAngle，
外层：段。外层*2+10，
内半径：0
})
var normalizedAngle=（segment.startAngle+segment.endAngle）/2；
while（normalizedAngle>2*Math.PI）{
归一化角度-=（2*Math.PI）
}
if（normalizedAngle<（Math.PI*0.4）| |（normalizedAngle>Math.PI*1.5））
ctx.textAlign=“开始”；
else if（normalizedAngle>（Math.PI*0.4）和&（normalizedAngle（Math.PI*1.4）和&（normalizedAngle

---

---

Fiddle-

请参见：或者@Sabba first是我在问题中提供的，second将查看它查看第二个，这不是他们想要的方式，他们希望它像第一个一样，所以标签应该在条的边界上。当值=0时，它仍然应该显示label@Kiwi-看起来很接近你想要的。@potatopeelings是的，这看起来确实很接近，但现在我只需要让它与角度图表版本一起工作哇，很好！一个小问题，是否可以保留标签？因为当我悬停它时，它们dissapear@Kiwi哦，我错过了设置ToolTipeEvents。我已经更新了答案和小提琴。很好！我现在正在尝试获取一条线段，并尝试为了弄清楚它不会切断顶部标签，目前我有这样一个方法；一个简单的方法是将比例增加1步，并减少一点外层。对于部分，我想你可以（mis）再次使用tooltipPosition函数，将startAngle和endAngle之间的角度减少/增加一半，以获得每个扇区的边缘，然后使用ctx绘制线条。是的，我正在（错误地）使用，请看一看a如果可以的话，我在画布上添加了一些宽度和高度，出现了以下情况：