-
Notifications
You must be signed in to change notification settings - Fork 325
chart types pie
강지웅/FE개발팀/NE edited this page Aug 26, 2016
·
16 revisions
- This section describes how to create pie chart with options.
- You can refer to the Getting started for base installation of Toast UI Chart.
The data type of the pie chart is simpler than the basic data type.
var rawData = {
series: [
{
name: 'Legend1',
data: 20
},
{
name: 'Legend2',
data: 50
},
{
name: 'Legend3',
data: 60
},
{
name: 'Legend4',
data: 80
},
{
name: 'Legend5',
data: 10
},
{
name: 'Legend6',
data: 30
}
]
};
var rawData = {
categories: ['Browser'],
series: [
{
name: 'Chrome',
data: 46.02
},
//...
]
};
tui.chart.pieChart(container, rawData);
If you set true
to series.showLegend
option and set 'center' to series.labelAlign
option, you can display a legend label to each center of a piece of the pie graph.
//...
var options = {
series: {
showLegend: true,
labelAlign: 'center'
},
legend: {
visible: false
}
};
tui.chart.pieChart(container, rawData, options);
If you set 'outer' to series.labelAlign
option, you can display a legend label to outer of pie graph.
//...
var options = {
series: {
showLegend: true,
labelAlign: 'outer'
},
legend: {
visible: false
}
};
tui.chart.pieChart(container, rawData, options);
If you use radiusRange
option, you can creating a donut chart.
radiusRange
option is an array type having a percentage value.
//...
var options = {
series: {
radiusRange: ['70%', '100%']
}
};
tui.chart.pieChart(container, rawData, options);
Also, if you set only first element at radiusRange
option, you can change size of radius for pie graph.
//...
var options = {
series: {
radiusRange: ['50%']
}
};
tui.chart.pieChart(container, rawData, options);
If you use startAngle
, endAngle
options with radiusRange
option, you can make semi circle chart.
var rawData = {
categories: ['Browser'],
series: [
{
name: 'Chrome',
data: 46.02
},
//...
]
};
var options = {
series: {
startAngle: -90,
endAngle: 90,
radiusRange: ['60%', '100%']
}
}
tui.chart.pieChart(container, rawData, options);
- Chart Guide