将标签添加到角度上的 jqplot 圆环图

Question

我需要以一定角度向圆环图添加标签，如图所示。我只能找到有关轴标签的角度文本的信息。有没有一种简单的方法可以为圆环图执行此操作？我不介意在 jqplot 渲染器内部进行一些更改，或者只是弄清楚角度并在叠加层上绘制文本 canvas — 我只是想知道是否有人这样做或知道更好的方法。

Answer 1

回答我自己的问题：我发现在圆环图中没有旋转标签的规定 - 它们作为标签存储在页面上。然而，加载图表后很容易将它们绘制到叠加层上 canvas。

var co = plot3.plugins.canvasOverlay;
var fiftiesSeries = plot3.series[0];

var ctx=co.canvas._ctx;
ctx.font="10px arial";
for (var i = 0; i < fiftiesSeries.gridData.length; i++) {
    if (fiftiesSeries.gridData[i][0]) {
        var targetX = fiftiesSeries._center[0] + ((fiftiesSeries._radius) * Math.sin(fiftiesSeries.gridData[i][1] - (fiftiesSeries.gridData[i][2] * Math.PI)));
        var targetY = fiftiesSeries._center[1] - ((fiftiesSeries._radius) * Math.cos(fiftiesSeries.gridData[i][1] - (fiftiesSeries.gridData[i][2] * Math.PI)));

        ctx.setTransform(1, 0, 0, 1, 0, 0); // reset
        ctx.translate(targetX, targetY);
        ctx.rotate(fiftiesSeries.gridData[i][1] - ((fiftiesSeries.gridData[i][2] + 0.5) * Math.PI));
        ctx.fillText(fiftiesSeries.gridData[i][0], 3, 3);
    }
}

我希望这对某人有所帮助。

将标签添加到角度上的 jqplot 圆环图

Adding labels to a jqplot donut chart on an angle

html5-canvas

label

jqplot

angle

donut-chart