当只有 1 个值时，拉斐尔饼图始终为蓝色（如何用一个切片设置饼图的颜色）答案

【问题标题】：raphael pie chart always blue when there is only 1 value (how to set color of a pie with one slice)当只有 1 个值时，拉斐尔饼图始终为蓝色（如何用一个切片设置饼图的颜色）
【发布时间】：2012-06-03 14:39:26
【问题描述】：

我对拉斐尔饼图有疑问。我使用的数据是动态的，在某些情况下，只返回 1 个值，这意味着整个图表被填充，因为它是唯一的切片。问题是当只有 1 个值时，它会忽略我的颜色指定。

例如：下面是一个具有 2 个值的拉斐尔饼图的创建，每个切片都有在“颜色”部分中指定的正确颜色：

var r = Raphael("holder");  
r.piechart(160, 136, 120, [100,200],{colors: ["#000","#cecece"]});

这很好用，我得到了两个大小合适的切片，一个黑色，一个灰色。

但是，无论我的颜色设置如何，下面的示例都会创建一个完整的馅饼，总是用蓝色填充。

var r = Raphael("holder");  
r.piechart(160, 136, 120, [100],{colors: ["#000"]});

在这种情况下，我真的需要那个完整的馅饼是黑色的，因为它是在“颜色”中设置的

是我做错了什么，还是这是一个错误？

【问题讨论】：

标签： raphael pie-chart graphael

【解决方案1】：

当馅饼只有一个切片时，INMO 是一个错误，它的颜色是硬编码的......

这是我解决它的方法（我所做的只是使用 colors arg 如果它存在...）

在 g.pie.js 第 47 行之后添加此内容

var my_color =  chartinst.colors[0];
if(opts.colors !== undefined){
    my_color =  opts.colors[0];
}

然后在下面一行（原js文件第48行）

series.push(paper.circle(cx, cy, r).attr({ fill: chartinst.colors[0]....

将chartinst.colors[0] 替换为my_color

就是这样

   if (len == 1) {
        var my_color =  chartinst.colors[0];
        if(opts.colors !== undefined){
            my_color =  opts.colors[0];
        }
        series.push(paper.circle(cx, cy, r).attr({ fill: my_color,   ....

【讨论】：

【解决方案2】：

您可能已经自己解决了这个问题，因为这个问题已经存在了一天……但是您可以“欺骗”拉斐尔，通过一个特殊的数据集来渲染一个黑色单元，以添加一个无穷小的第二个值。所以，给定一个包含数据点的数组数据...

if ( data.length == 1 )
    data.push( 0.000001 );

canvas.piechart(250, 250, 120, data, {colors: ["#000", "#CECECE", "#F88" /*, ... */ ] });

小条仍然会在 180 度位置呈现为单像素线，但您可能会通过使用调色板来伪造它。

是的，这是一个技巧。我不认为 gRaphael 的行为有缺陷，而是实施不善（单元素数据集显然是特殊情况，因为它们会像在所有其他情况下一样生成一个圆圈而不是路径）。

【讨论】：

【解决方案3】：

无需编辑 g.pie.js 对我来说很简单

var r = Raphael('st_diagram');

r.piechart(140, 140, 137, 100, 0.0001],{

        colors:['#9ae013','#9ae013'],
        strokewidth: 0
    });

【讨论】：