2015-07-22 60 views
0

我需要以一個角度向圓環圖添加標籤,如圖中所示。我只能找到關於軸標籤的角度文本的信息。有沒有一個簡單的方法來做到這一點的甜甜圈圖表?我不介意在jqplot渲染器中進行一些更改,或者只是找出角度並在覆蓋畫布上繪製文本—我只是想知道是否有人已經完成了這一步,或者知道更好的方法。 將標籤添加到一個角度的jqplot圓環圖

回答

1

回答我自己的問題:我發現沒有規定在圓環圖中旋轉標籤 - 它們作爲標籤存儲在頁面上。但是,在加載圖表後,將它們繪製到疊加畫布上很容易。

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

我希望這可以幫助別人。