Demo: http://antonfisher.com/extjs4-sandbox/
-
Copy sass file
/sass/src/ux/chart/series/D3Pie.scss
to your project; -
Copy js file
/app/ux/chart/series/D3Pie.js
to your project; -
Change class name
'Sandbox.ux.chart.series.D3Pie'
; -
Add requires:
requires: [
...
'Sandbox.ux.chart.series.D3Pie'
]
- Update chart config:
{
xtype: 'chart'
...
cls: 'ux-d3-pie', // add css class for d3pie
series: [
{
type: 'd3pie', // change serie type
d3: d3, // add link to d3 library
angleField: 'value',
radius: 90,
donut: 60,
label: {
field: 'name',
legendField: 'legend'
}
}
]
}
- Try to change some options.
Option | Description |
---|---|
d3: undefined |
{Object} [required] link to D3 library object |
radius: undefined |
{Number} pie radius ('undefined' for auto) |
donut: undefined |
{Number} donut radius ('undefined' for auto) |
centerX: undefined |
{Number} pie center X coordinate ('undefined' for auto) |
centerY: undefined |
{Number} pie center Y coordinate ('undefined' for auto) |
labelTextOffset: 15 |
{Number} labels offset |
angleField: 'value' |
{String} store property name for pie value |
label: {...} |
{Object} label properties |
showItemDescription: true |
{Boolean} show text description under value |
totalTitle: 'TOTAL' |
{String} total title |
noDataText: 'NO DATA' |
{String} no data text |
highlightStyle: 'opacity: 0.1' |
{String} highlight style for pie item's path |
unHighlightStyle: 'opacity: 1' |
{String} unhighlight style for pie item's path |
filterAngle: 0.25 |
{Number} hide label when angle is less than this value |
border: 0 |
{Number} pie border |
pathStrokeWidth: 1 |
{Number} pie paths stroke width |
pathStrokeColor: '#ffffff' |
{String} pie paths stroke color |
borderColor: '#eeeeee' |
{String} pie border color (if border property > 0) |
backgroundColor: '#ffffff' |
{String} pie background color |
emptyBackgroundColor: '#eeeeee' |
{String} empty pie background color |
Note: Additionally label
object may contain legendField
field to show it in legend:
label: {
field: 'name',
legendField: 'legend'
}
Renderers:
totalValueRenderer: function (totalValue, store) {...}
{Function} renderer for pie total valueitemValueRenderer: function (dataItem, totalValue, store) {...}
{Function} renderer for item valueitemDescriptionRenderer: function (dataItem, totalValue, store) {...}
{Function} renderer for pie item description
Copyright (c) 2014 Anton Fischer
MIT License. Free use and change.