@tremorvideo/pie
v4.0.1
Published
Pie chart, developed using d3.
Downloads
2
Readme
Component Pie
Pie component handles the rendering of simple pie / donut chart using d3.
Model Structure
{
data: [{
classname: "data1",
value: 60
}, {
classname: "data2",
value: 60
}, {
classname: "data3",
value: 120
}, {
classname: "data4",
value: 60
}]
}
Controller
Main
Pie.Main initializes and hooks Model.Main and View.Main
var controller = new Pie.Main({
model: {
data: data
},
view: {
el: "#pie",
width: 200,
height: 200,
radius: 90
}
});
controller.model.set("data", data);
Percentage
Pie.Percentage initializes and hooks Model.Percentage and View.Main or View.Percentage based on initialization option.
var controller = new Pie.Percentage({
model: {
percentage: 0
},
view: {
el: "#pie",
width: 200,
height: 200,
radius: 90,
innerRadius: 70,
startAngle: 35,
endAngle: 325,
showLabel: false
}
});
controller.model.set("percentage", 70);
Widget
Pie.Widget initializes and hooks Model.Percentage and View.Widget.
var controller = new Pie.Widget({
model: {
percentage: 0,
icon: '<i class="s-blu-viewable-completions"></i>',
label: 'Impression<br>Share'
},
view: {
el: "#pie",
showTotal: true
}
});
controller.model.set("percentage", 70);