什么方法最适合构建这个复杂的图形

php javascript css user-interface charts

2022-08-30 16:34:55

在做了15年的UI开发之后，我很少看到并思考，“我到底该怎么做。这是其中一次。

一位平面设计师向我的客户出售了一个非常复杂的五边形图形，由5个单独的三角形组成。设计器已指定每个三角形应为与品牌匹配的特定颜色，并且每个三角形应根据每种颜色表示的过程百分比“填充”。您几乎必须看到图像才能理解： enter image description here

我绞尽脑汁地绞尽脑汁，试图弄清楚如何完成这项任务。客户端已指定它必须与所有主流浏览器兼容，为了保持理智，我将告诉他这将是IE7 +。这严重限制了CSS3技术，尽管由于缺乏其他想法，我肯定会考虑CSS3方法。我宁愿不要熬夜在动作脚本上打，所以Flash在我的愿望清单上垫底。我实际上已经集思广益，如何使用Sprites来做到这一点，但是生成250或500个三角形以及相关的CSS的想法与将Chrome换成IE6的想法一样。

该网站建立在PHP / MySQL上，我们大量使用Jquery。如有必要，我们也可以使用完整版本的FusionCharts和HighCharts。如果有一种商业产品可以实现这一目标，我当然愿意购买它来使这项工作。

实现这项艰巨任务的最佳方法是什么？

答案 1

除非我能找到一个已经编写的实现，否则我会使用Raphaël。

这将需要大量的工作，但最终结果应该是非常好的。

看看一些演示，它们非常光滑。

Raphaël目前支持Firefox 3.0+，Safari 3.0 +，Chrome 5.0 +，Opera 9.5 +和Internet Explorer 6.0 +。

这似乎很有趣，所以我决定用Raphaël自己实现它：

请参见： http://jsfiddle.net/2Tsjy/

它应该在“所有浏览器”中工作。我唯一没有做的部分是文本。

JavaScript：

var paper = Raphael("pentagon"),
    fullNum = [40, 53],
    borderColours = ['#329342','#9e202c','#f47933','#811f5a','#11496c'],
    fillColours = ['#74ae3d','#d01f27','#eaa337','#32133f','#2c7aa1'],
    triangles = [],
    border, fill, st, i;

for (i=0; i<5; i++) {
    border = paper.path(getPercentPath(0)).attr({
        'fill': borderColours[i],
        'stroke-width': 0        
    }),
    fill = paper.path(["M", 116, 123] + "l-44,61 88,0z").attr({
        'stroke': fillColours[i],
        'stroke-width': 6
    });
    triangles.push(border);

    st = paper.set();
    st.push(border, fill);
    st.rotate(i * 72, 116, 113);

    setPercent(i, 30+Math.floor(Math.random()*70));
}

function getPercentPath(percent) {
    var ratio = percent/100;
    return ["M", 116, 128] + "l-" + ratio*fullNum[0] + "," + ratio*fullNum[1] + " " + ratio*fullNum[0]*2 + ",0z";
}
function setPercent(i, percent) {
    triangles[i].attr({
        path: getPercentPath(percent)
    });
}


setInterval(function(){
    for (var i=0; i<5; i++) {
        setPercent(i, 30+Math.floor(Math.random()*70));
    }
}, 2000);

CSS：

#pentagon {
    width: 226px;
    height: 227px;
    border: 1px solid red;
    background: #fff;
    background: rgba(255,255,255,0.8)
}

网页：

<div id="pentagon"></div>

答案 2

我必须推荐RaphaelJS（见 http://raphaeljs.com/）。它与IE7兼容，你可以做得很好：你需要做数学运算，但很有可能。

编辑：查看 http://www.chittram.com/editor.jsp，以获取可以完成的一些形状的快速示例。该网站是一个交互式编辑器，但展示了您需要的核心功能。