拉斐尔演示饼图调整添加自定义颜色
raphael demo pie chart tweak to add custom colors
如何添加自定义颜色到这个拉斐尔饼图。http://raphaeljs.com/pie.html它从HTML表中获取值并将它们插入到饼状图中。现在它使用以下内容来填充扇区。我认为它使用了一个随机器来选择十六进制颜色。我不确定。
bcolor = Raphael.hsb(start, 1, 1),
p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 2}),
我希望能够在一个数组设置十六进制的颜色。不应超过6个值。这里是完整的代码。我也想设置自定义梯度,但现在不是必要的。
Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) {
var paper = this,
rad = Math.PI / 180,
chart = this.set();
function sector(cx, cy, r, startAngle, endAngle, params) {
var x1 = cx + r * Math.cos(-startAngle * rad),
x2 = cx + r * Math.cos(-endAngle * rad),
y1 = cy + r * Math.sin(-startAngle * rad),
y2 = cy + r * Math.sin(-endAngle * rad);
return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}
var angle = 0,
total = 0,
start = 0,
process = function (j) {
var value = values[j],
angleplus = 360 * value / total,
popangle = angle + (angleplus / 2),
color = Raphael.hsb(start, .90, 1),
ms = 500,
delta = 30,
bcolor = Raphael.hsb(start, 1, 1),
p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 2}),
txt = paper.text(cx + (r + delta + 2) * Math.cos(-popangle * rad), cy + (r + delta + 5) * Math.sin(-popangle * rad), labels[j]).attr({fill: "#999999", stroke: "none", opacity: 1, "font-size": 13});
p.mouseover(function () {
p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
//txt.stop().animate({opacity: 1}, ms, "elastic");
}).mouseout(function () {
p.stop().animate({transform: ""}, ms, "elastic");
//txt.stop().animate({opacity: 0}, ms);
});
angle += angleplus;
chart.push(p);
chart.push(txt);
start += .1;
};
for (var i = 0, ii = values.length; i < ii; i++) {
total += values[i];
}
for (i = 0; i < ii; i++) {
process(i);
}
return chart;
};
$(function () {
var values = [],
labels = [];
$("tr").each(function () {
values.push(parseInt($("td", this).text(), 10));
labels.push($("th", this).text());
});
$("table").hide();
Raphael("holder-new", 400, 400).pieChart(100, 100, 50, values, labels, "#fff");
});
bcolor = Raphael.hsb(hue,saturation,value)
取start的值为hue。所以它从0开始,每个扇区增加1。没有什么是随机的。要做你需要的,只需创建你的数组。
var colors = ['red','green','blue','yellow','#ffaa00','#00ffaa','#aa00ff'];
设置数组的颜色(模数将j的值保持在颜色数组的长度范围内)
bcolor = colors[j%colors.length]
并在你的段
中使用它p = sector(cx, cy, r, angle, angle + angleplus,
{fill: "90-" + bcolor + "-" + bcolor, stroke: stroke, "stroke-width": 1})
我编辑的原始代码使用了两种颜色(color和bcolor),而我在这里只有bcolor。如果你想要渐变,添加其他颜色。
这是一个显示结果的提琴
相关文章:
- 如何将可调整大小、可拖动的覆盖添加到网页中
- 添加JQuery UI在Meteor中添加对象后可调整大小
- 无法在调整窗口大小时动态添加类
- 通过在顶部和左侧添加空间来调整画布大小.
- 在 JavaScript 中编辑 blob 图像(调整大小并添加边框)
- 如何添加选项来调整引导盒警报的大小
- fabric js - 根据画布中添加的矩形调整完整画布的大小以实现裁剪
- 添加此 JavaScript 异步调整
- 添加新元素时调整子元素的大小
- 添加文本工具,在Html5画布上拖放并调整其大小
- 可调整大小是添加第二个包装器,而不是更改第一个包装器的大小
- jQuery:在调整窗口大小时添加和删除元素,但始终覆盖窗口
- 添加当窗口从移动设备更改为桌面时调整大小事件
- 无法将调整大小事件添加到tinymce编辑器
- 只添加一次调整大小事件处理程序
- 动态添加的 DIV,具有拖动和调整大小功能
- 添加和调整文本和符号
- 如何使用Backbone将调整大小事件添加到视图中的窗口中
- 动态添加新数据时调整FancyBox模式的大小
- 拉斐尔演示饼图调整添加自定义颜色