什么方法最好构建这个复杂的图 [英] What method would be best to build this complex graph
问题描述
经过15年的UI开发，我很少看到并思考，我怎么做到这一点。这是那些时代之一。
After 15 years doing UI development, there's very little I look at and think, "how on earth do I do that." This is one of those times.
一位平面设计师将我的客户销售在一个非常复杂的图形上，形状为五边形，由5个单独的三角形组成。设计者已经指定每个三角形应该是特定的颜色以匹配品牌，并且每个三角形应该基于每个颜色表示的过程的百分比填充。您几乎必须看到要显示的图片：
A graphic designer has sold my clients on a very complex graph in the shape of a pentagon, made up of 5 individual triangles. The designer has specified that each triangle should be a specific color to match the branding, and each should "fill" based on the percentage of the process that each color represents. You almost have to see the image to understand:
我一直在试图弄清楚如何完成这项任务。客户已经指定它必须在所有主流浏览器兼容，我会告诉他将是IE7 +为了理智的缘故。这严重限制了CSS3技术，虽然我肯定会招待CSS3方法缺乏其他的想法。我宁愿不要上了晚上打动动作脚本，所以Flash是在我的愿望清单的底部。我实际上集思广益如何使用Sprites，但是生产250或500个三角形和相关的CSS的想法在那里交易Chrome for IE6。
I've been racking my brain for a day trying to figure out how to accomplish this task. The client has specified that it must be compatible in all major browsers, which I'm going to tell him will be IE7+ for sanity's sake. That heavily limits CSS3 techniques, though I'd certainly entertain CSS3 methods for lack of other ideas. I'd prefer not to be up late nights beating on Action Script, so Flash is at the very bottom of my wish list. I've actually brainstormed how to do it using Sprites, but the idea of producing 250 or 500 triangles and the associated CSS ranks right up there with trading Chrome for IE6.
该网站建立在PHP / MySQL上，我们大量使用Jquery。如有必要，我们还提供完整版FusionCharts和HighCharts。如果有一个商业产品可以实现这一点，我肯定愿意购买它，使这项工作。
The site is built on PHP/MySQL, and we heavily use Jquery. We have a full version of FusionCharts and HighCharts at our disposal as well if necessary. If there's a commercial product out there that can achieve this, I'm certainly willing to purchase it to make this work.
什么是最好的方法来实现这个困难的任务？？
What is the best method to achieve this difficult task?
推荐答案
除非我能找到已经写入的实施，否则我会使用Raphaël。
Unless I could find an implementation already written, I'd use Raphaël.
这需要大量的工作，但最终结果应该非常好的。
It will take significant work, but the end result should be very good.
看看一些演示，他们是令人难以置信的浮动。
Take a look at some of the demos, they're incredibly slick.
Raphaël目前支持Firefox
3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+和Internet Explorer 6.0+。
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
这似乎很有趣，所以我决定用Raphaël自己实现：
This seemed interesting, so I decided to implement it myself with Raphaël:
它应该在所有浏览器工作。我没有做的只是文本。
It should work in "all browsers". The only part I didn't do was the text.
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)
}
HTML ：
HTML:
<div id="pentagon"></div>
这篇关于什么方法最好构建这个复杂的图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
