Какой метод лучше всего построить этот сложный граф
После 15 лет разработки пользовательского интерфейса я очень мало смотрю и думаю: «Как же я это делаю». Это один из тех моментов.
Графический дизайнер продал моим клиентам очень сложный график в форме пятиугольника, составленный из 5 отдельных треугольников. Дизайнер указал, что каждый треугольник должен быть определенного цвета, чтобы соответствовать бренду, и каждый должен «заполнять» в зависимости от процента процесса, который представляет каждый цвет. Вам почти нужно увидеть изображение, чтобы понять:
Я целый день ломал голову, пытаясь придумать, как выполнить эту задачу. Клиент указал, что он должен быть совместим со всеми основными браузерами, и я скажу ему, что это будет IE7 + для вменяемости. Это сильно ограничивает методы CSS3, хотя я бы определенно использовал методы CSS3 из-за отсутствия других идей. Я бы предпочел не ложиться спать допоздна, работая над Action Script, поэтому Flash находится в самом конце моего списка желаний. Я на самом деле придумал, как это сделать с помощью спрайтов, но идея создания 250 или 500 треугольников и связанный с ними CSS занимает одно место с торговлей Chrome для IE6.
Сайт построен на PHP / MySQL, и мы в значительной степени используйте JQuery. При необходимости в нашем распоряжении также есть полная версия FusionCharts и HighCharts. Если там' Поскольку коммерческий продукт может достичь этого, я, конечно же, готов купить его, чтобы заставить эту работу работать.
Каков наилучший метод для решения этой сложной задачи?
2 ответа
Если бы я не смог найти реализацию , уже написанную , я бы использовал Рафаэль .
Это займет значительную работу, но конечный результат должен быть очень хорошим.
Взгляните на некоторые из демонстраций, они невероятно гладкие.
Raphaël в настоящее время поддерживает Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+.
Это казалось интересным, поэтому я решил реализовать это сам с Рафаэлем:
См .: 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)
}
HTML:
<div id="pentagon"></div>
Как насчет <canvas>? Вы можете легко нарисовать один треугольник, а затем нарисовать остальные, просто повернув холст 360/5 градусов.
Пример: http://jsfiddle.net/Stijntjhe/dC6kX/
window.onload = function() {
var ce = document.getElementById('ce');
var c = ce.getContext('2d');
c.translate(ce.offsetWidth / 2, ce.offsetHeight / 2);
for(var pie = 0; pie < 5; pie++) {
c.save();
c.rotate(pie/5 * Math.PI * 2);
c.beginPath();
c.moveTo(0, -10);
c.lineTo(-50, -80);
c.lineTo(50, -80);
c.lineTo(0, -10);
c.lineWidth = 5;
c.lineCap = 'square';
c.strokeStyle = colors[pie];
c.stroke();
c.restore();
}
}
Становится:
Минусы: Возможно, еще не кросс-браузер.