Question

考虑：

value1 = 5;
v1_color = #ff0000;

value2 = 4;
v2_color = #00ff00;

value3 = 3;
v3_color = #0000ff;

var r = Raphael("holder");
pie = r.piechart(320,320,250,{value1,value2,value3},{colors: [v1_color, v2_color,v3_color]});

这将生成一个饼图，其中上部切片为红色，右下角的切片为绿色，最后的切片为蓝色。但是，如果值改变如下：

value1 = 4;
value2 = 3;
value3 = 5;

图表看起来完全一样，但颜色不再代表正确的值。在source code中，第99-101行显示了正在排序的值，但没有其他内容。

我希望颜色对应于某个变量，无论它有多大，而不是获得选项中列出的第一个颜色的最大变量。

在代码中绘制切片的部分（第133行），它引用opts.matchColors，但我找不到任何关于如何在调用函数时设置它的文档。

任何想法如何实现这一目标？

Answer 1

遗憾的是，根本没有记录opts.matchColors，因为它正是您所需要的。

opts.matchColors强制它匹配colors数组的顺序与values数组的顺序。当值按大小重新排序时，颜色将以原始值应用于楔形。

matchColors默认为false，因此您需要在options数组中显式设置它，如下所示：

var pie = r.piechart(320, 320, // center
                     250,      // radius
                     [
                         value1,
                         value2,
                         value3
                     ],
                     {
                         colors       : [
                                            v1_color,
                                            v2_color,
                                            v3_color
                                        ],
                          matchColors : true
                     });

g.Raphael piechart对图表数据进行排序，而不是颜色，网址

1 个答案: