1

次のように、特定のドーナツ セクターに曲がったラベルを使用して、ドーナツ スタイルの円グラフを作成したいと考えています。

ここに画像の説明を入力

このモックアップでは、ユーザーは「Raphael.js」セクターをクリックしています。クリックされたセクターには、円グラフの下に新しい HTML Div を表示し、いくつかの情報を表示するイベント ハンドラーも必要です。完璧な解決策は、クリックされたセクターが下部になるようにドーナツが回転する場合です。

誰でも助けることができますか？

4

1 に答える 1

3

パスに沿ってテキストを作成するコードを次に示します。これは完璧ではありませんが、独自のプロジェクトを指定するには十分です。

var paper = Raphael(0, 0, '100%', '100%'),
    r = 200,
    path = paper.path("M100,50a" + r + "," + r + " 0 0,1 " + r + "," + r).attr({ stroke: "#000", 'stroke-width': '40px'}),
    message = "Raphael.js",
    message_length = 0,
    letters = [],
    places = [],
    ratio,
    fontsize,                                                
    letter,
    c = 0,
    p;


//since not every letter is the same width, get the placement for each letter along the length of the string
//however, Raphael appears to group the width of letters into intervals of 4px, so this won't be perfect        
for (; c < message.length; c += 1) {
    letter = paper.text(0, 0, message[c]).attr({"text-anchor" : "start"}).attr({fill: '#FFF'});
    letters.push(letter);
    places.push(message_length);
    //spaces get a width of 0, so set min at 4px
    message_length += Math.max(4, letter.getBBox().width);
}

ratio = path.getTotalLength() / message_length;
fontsize = 8 * ratio;

for (c = 0; c < letters.length; c += 1) {
    letters[c].attr("font-size", fontsize + "px"); 
    p = path.getPointAtLength(places[c] * ratio);
    //there does appear to be a bug in p.alpha around 180. Here's the fix
    letters[c].attr({ x: p.x, y: p.y, transform: 'r' + (p.alpha < 180 ? p.alpha + 180 : p.alpha)});
}

jsフィドル

他のことに関しては、まず自分自身に取り組み、壁にぶつかった場合は具体的な質問をする必要があります.

于 2013-01-28T21:41:11.313 に答える