1

ラファエルはパスを作成できますが、ラインは作成できません。私はd3が両方を作成できることを知っています。

これに似た箱ひげ図を作成したいと思いますが、垂直ではなく水平です。私は次の形式のjsonデータを持っています：

{
    "lowestValue":"53",
    "lowerQuartile":"63",
    "medianValue":"73",
    "upperQuartile":"80",
    "highestValue":"99",
    "targetValue":"80"
},
...

IE7 / IE8で正しく表示されるように、d34raphaelまたは純粋なラファエルを使用して（または複数の）箱ひげ図を作成するにはどうすればよいですか？

これが最終目標の写真です。

チャート

4

1 に答える 1

2

パスは非常に類似したプリミティブであるため、生の Raphael を使用してそのようなグラフを簡単に再作成できるように思われます (最近はこれがますます私の好みになっているようです)。次のような効用関数を考えてみましょう。

function whisker( paper, x, y, width, height, data )
{
    var x1 = x + data.lowestValue * width / 100, x2 = x + data.highestValue * width / 100;
    var outer_range = paper.path( [ "M", x1, y + height * 0.25, "L", x1, y + height * 0.75, "M", x1, y + height / 2, "L", x2, y + height / 2, "M", x2, y + height / 4, "L", x2, y + height * 0.75 ] ).attr( { fill : 'none', stroke: 'gray' } );
    var inner_range = paper.rect( x + ( width * data.lowerQuartile / 100 ), y, width * ( data.upperQuartile - data.lowerQuartile ) / 100, height, 0 ).attr( { fill: 'lightgray', stroke: 'black' } );
    var median = paper.path( [ "M", x + width * data.medianValue / 100, y, "L", x + width * data.medianValue / 100, y + height ] ).attr( { fill: 'none', stroke: 'black' } );;
    var target = paper.circle( x + ( width * data.targetValue / 100 ), y + height / 2, height / 4 ).attr( { fill: 'black' } );
}

6 番目のパラメーターは、単純に json データです。もちろん、各ひげの y 値をインクリメントする必要があります。これが私のウェブサイトで実行中のコードです。

于 2012-09-17T23:13:42.377 に答える