JavaScript (ES6), 311 310 303302 bytes
a=>{with(Math)document.write(`<svg height=300>`+a.map((n,i)=>`<path fill=#${(p*4e3|0).toString(16)} d=M135,150L${c(o=100,v=0)}A${[o,o,0,(v=n/=s)+.5|0,0,c(o)]}Z /><text x=${(z=c(135,v/=2))[0]} y=${z[p+=n,1]}>${n*o+.5|0}%</text>`,c=r=>[sin(d=PI*2*(v+p))*r+135,cos(d)*r+150],s=eval(p=s=0,a.join`+`map(n=>s+=n),p=0).join``)}
var solution =
a=>{
with(Math)
document.write( // write to HTML body
`<svg height=300>`+ // create 300px x 300px SVG canvas (width defaults to 300px)
a.map((n,i)=> // for each number
// Get the hex colour by multiplying the current position by (roughly) 0xfff
`<path fill=#${(p*4e3|0).toString(16)
// Calculate the path of the pie slice
} d=M135,150L${c(o=100,v=0)}A${[o,o,0,(v=n/=s)+.5|0,0,c(o)]
// Text
}Z /><text x=${(z=c(135,v/=2))[0]} y=${z[p+=n,1]}>${n*o+.5|0}%</text>`,
// Returns [ x, y ] for a certain radius at position v around the pie
c=r=>[sin(d=PI*2*(v+p))*r+135,cos(d)*r+150],
s=eval(a.join`+`) p=s=0, // s = sum of all numbers
p=0 // p = current position around pie (0 - 1)
a.map(n=>s+=n) // ps = current positionsum aroundof pieall (0numbers
- 1)
).join``
+`</svg>` // <- this is just here for the test, so multiple charts can be displayed
)
}
// Test
;[
[0.3, 1.2],
[3, 6, 2, 10],
[0.4387, 0.3816, 0.7655, 0.7952, 0.1869, 0.4898, 0.4456, 0.6463, 0.7094, 0.7547]
].map(c=>solution(c));
