2015-07-22 4 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); 
    } 
} 

Я надеюсь, что это кому-то поможет.

Смежные вопросы