SVG餅圖紅寶石

我試圖產生一個很小的代碼塊，將構建對我來說是SVG的餅圖，列舉如下：SVG餅圖紅寶石

# piechart-svg.rb: 
BEGIN { 
    @colors = [] 
    both = %w(coral grey green salmon blue seagreen slategrey cyan) 
    darks = %w(magenta red olivegreen orange turquoise goldenrod khaki orchid slateblue violet) 
    lights = %w(steelblue yellow skyblue pink goldenrodyellow) 
    @colors << both.map {|c| [c, "light#{c}", "dark#{c}"] } 
    @colors << darks.map {|c| [c, "dark#{c}"] } 
    @colors << lights.map {|c| [c, "light#{c}"] } 
    @colors.flatten! 

    @radius = 100.0 
    @prevcoord = "#{@radius},0" 
    puts <<-EOF 
<?xml version="1.0" standalone="no" ?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    preserveAspectRatio="xMinYMin" 
    viewBox="-#{@radius},-#{@radius} #{@radius*2},#{@radius*2}"> 
    <defs> 
    <style> 
     .wedge { stroke: darkgrey; stroke-linejoin: round; fill-opacity: .2; } 
    </style> 
    </defs> 
    EOF 
} 

ARGV.each_with_index do |percent,index| 
    print " <path class=\"wedge\" fill=\"#{@colors[index]}\" d=\"" 
    angle_as_degrees = percent.to_f/100 * 360 
    x = Math::cos(angle_as_degrees * 180/Math::PI) * @radius 
    y = Math::sin(angle_as_degrees * 180/Math::PI) * @radius 
    print "M#{@prevcoord} A#{@radius},#{@radius} 0 0,1 #{x},#{y} L0,0 Z\" />\n" 
    @prevcoord = "#{x},#{y}" 
end 

END { puts " <circle fill=\"none\" stroke=\"black\" r=\"#{@radius}\" /> 
</svg>" }

麻煩的是，如果我給它，比如說50％（ruby piechart-svg.rb 50），產生的楔形不到圓的一半。我不明白爲什麼。

來源

2010-12-05 morbusg

對於未來的問題，您可能會略微削減測試代碼。例如，顏色和樣式並不能說明問題。 – Phrogz 2010-12-05 15:22:52

你有你的弧度向後轉換度。應該是：

x = Math::cos(angle_as_degrees * Math::PI/180) * @radius 
y = Math::sin(angle_as_degrees * Math::PI/180) * @radius

請注意，如果任何切片大於50％，您仍然遇到問題，但這與此問題是分開的。 :)

來源

2010-12-05 15:13:10 Phrogz

SVG餅圖紅寶石

回答

相關問題