P
CUI v1.20.1177
Documentation and examples in using Pie Chart with PCUI Vue Component implementation
<link href="~/PCUIAssets/PCUI/Elements/PieChart/css/PieChart.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Elements/PieChart/js/PieChart.js"></script>
<script src="~/PCUIAssets/PCUI/Elements/PieChart/js/prefixfree.min.js"></script>
<script src="~/PCUIAssets/PCUI/Elements/PieChart/js/conic-gradient.js"></script>
<pcui_pie_chart :pie-chart-data="pieChartDatas1"
chart-orientation="row"
label-text="DATA POINTS"
label-value="100"
ref="pcui-piechart1">
</pcui_pie_chart>
var chartDOM = new Vue({
el: '#pie-charting',
data: function() {
return {
pieChartDatas1: [
{
legendName: 'LEGEND NAME 1',
value: 220,
},
{
legendName: 'LEGEND NAME 2 LEGEND NAME 2 LEGEND NAME 2',
value: 400,
},
{
legendName: 'LEGEND NAME 2',
value: 550,
},
{
legendName: 'LEGEND NAME 2',
value: 980,
},
{
legendName: 'LEGEND NAME 2',
value: 999,
},
{
legendName: 'LEGEND NAME 2',
value: 1000,
},
]
};
},
components: {
pcui_pie_chart: PCUIPieChartElement
}
});
<pcui_pie_chart :pie-chart-data="pieChartDatas"
chart-orientation="column"
label-text="DATA POINTS"
label-value="100"
ref="pcui-piechart">
</pcui_pie_chart>
var chartDOM = new Vue({
el: '#pie-charting',
data: function() {
return {
pieChartDatas: [
{
legendName: 'LEGEND NAME 1',
value: 20,
color: 'red'
},
{
legendName: 'LEGEND NAME 2 LEGEND NAME 2 LEGEND NAME 2',
value: 40,
color: 'blue'
},
{
legendName: 'LEGEND NAME 2',
value: 50,
color: 'green'
},
{
legendName: 'LEGEND NAME 2',
value: 70,
color: 'gray'
},
{
legendName: 'LEGEND NAME 2',
value: 80,
color: 'black'
},
{
legendName: 'LEGEND NAME 2',
value: 100,
color: 'yellow'
},
]
};
},
components: {
pcui_pie_chart: PCUIPieChartElement
}
});