1

我知道拉斐尔可以创建路径，但不能创建线条。我知道d3可以同时创建两者。

我想创建一个盒须图，类似于这个，但水平而不是垂直。我有以下形式的 json 数据：

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

如何使用d34raphael或纯 raphael 创建一个（或多个）盒须图，以便在 IE7/IE8 中正确显示？

这是最终目标的图片：

图表

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

第六个参数就是你的 json 数据。当然，您需要增加每个胡须的 y 值。这是我网站上的代码。

于 2012-09-17T23:13:42.377 回答