169 lines
5.1 KiB
JavaScript
169 lines
5.1 KiB
JavaScript
/**
|
|
* @class Ext.chart.series.Radar
|
|
* @extends Ext.chart.series.Polar
|
|
*
|
|
* Creates a Radar Chart. A Radar Chart is a useful visualization technique for comparing different quantitative values for
|
|
* a constrained number of categories.
|
|
* As with all other series, the Radar series must be appended in the *series* Chart array configuration. See the Chart
|
|
* documentation for more information. A typical configuration object for the radar series could be:
|
|
*
|
|
* @example preview
|
|
* var chart = new Ext.chart.PolarChart({
|
|
* animate: true,
|
|
* interactions: ['rotate'],
|
|
* store: {
|
|
* fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* data: [
|
|
* {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
|
|
* {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
|
|
* {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
|
|
* {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
|
|
* {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
|
|
* ]
|
|
* },
|
|
* series: [{
|
|
* type: 'radar',
|
|
* xField: 'name',
|
|
* yField: 'data4',
|
|
* style: {
|
|
* fillStyle: 'rgba(0, 0, 255, 0.1)',
|
|
* strokeStyle: 'rgba(0, 0, 0, 0.8)',
|
|
* lineWidth: 1
|
|
* }
|
|
* }],
|
|
* axes: [
|
|
* {
|
|
* type: 'numeric',
|
|
* position: 'radial',
|
|
* fields: 'data4',
|
|
* style: {
|
|
* estStepSize: 10
|
|
* },
|
|
* grid: true
|
|
* },
|
|
* {
|
|
* type: 'category',
|
|
* position: 'angular',
|
|
* fields: 'name',
|
|
* style: {
|
|
* estStepSize: 1
|
|
* },
|
|
* grid: true
|
|
* }
|
|
* ]
|
|
* });
|
|
* Ext.Viewport.setLayout('fit');
|
|
* Ext.Viewport.add(chart);
|
|
*
|
|
*
|
|
*/
|
|
Ext.define('Ext.chart.series.Radar', {
|
|
extend: 'Ext.chart.series.Polar',
|
|
type: "radar",
|
|
seriesType: 'radar',
|
|
alias: 'series.radar',
|
|
requires: ['Ext.chart.series.Cartesian', 'Ext.chart.series.sprite.Radar'],
|
|
/**
|
|
* @cfg {Object} style
|
|
* An object containing styles for overriding series styles from theming.
|
|
*/
|
|
|
|
config: {
|
|
|
|
},
|
|
|
|
updateAngularAxis: function (axis) {
|
|
axis.processData(this);
|
|
},
|
|
|
|
updateRadialAxis: function (axis) {
|
|
axis.processData(this);
|
|
},
|
|
|
|
coordinateX: function () {
|
|
return this.coordinate('X', 0, 2);
|
|
},
|
|
|
|
coordinateY: function () {
|
|
return this.coordinate('Y', 1, 2);
|
|
},
|
|
|
|
updateCenter: function (center) {
|
|
this.setStyle({
|
|
translationX: center[0] + this.getOffsetX(),
|
|
translationY: center[1] + this.getOffsetY()
|
|
});
|
|
this.doUpdateStyles();
|
|
},
|
|
|
|
updateRadius: function (radius) {
|
|
this.setStyle({
|
|
endRho: radius
|
|
});
|
|
this.doUpdateStyles();
|
|
},
|
|
|
|
updateRotation: function (rotation) {
|
|
this.setStyle({
|
|
rotationRads: rotation
|
|
});
|
|
this.doUpdateStyles();
|
|
},
|
|
|
|
updateTotalAngle: function (totalAngle) {
|
|
this.processData();
|
|
},
|
|
|
|
getItemForPoint: function (x, y) {
|
|
var me = this,
|
|
sprite = me.sprites && me.sprites[0],
|
|
attr = sprite.attr,
|
|
dataX = attr.dataX,
|
|
dataY = attr.dataY,
|
|
centerX = attr.centerX,
|
|
centerY = attr.centerY,
|
|
minX = attr.dataMinX,
|
|
maxX = attr.dataMaxX,
|
|
maxY = attr.dataMaxY,
|
|
endRho = attr.endRho,
|
|
startRho = attr.startRho,
|
|
baseRotation = attr.baseRotation,
|
|
i, length = dataX.length,
|
|
store = me.getStore(),
|
|
marker = me.getMarker(),
|
|
item, th, r;
|
|
|
|
if (sprite && marker) {
|
|
for (i = 0; i < length; i++) {
|
|
th = (dataX[i] - minX) / (maxX - minX + 1) * 2 * Math.PI + baseRotation;
|
|
r = dataY[i] / maxY * (endRho - startRho) + startRho;
|
|
if (Math.abs(centerX + Math.cos(th) * r - x) < 22 && Math.abs(centerY + Math.sin(th) * r - y) < 22) {
|
|
item = {
|
|
series: this,
|
|
sprite: sprite,
|
|
index: i,
|
|
record: store.getData().items[i],
|
|
field: store.getFields().items[i]
|
|
};
|
|
return item;
|
|
}
|
|
}
|
|
}
|
|
return this.callSuper(arguments);
|
|
},
|
|
|
|
getXRange: function () {
|
|
return [this.dataRange[0], this.dataRange[2]];
|
|
},
|
|
|
|
getYRange: function () {
|
|
return [this.dataRange[1], this.dataRange[3]];
|
|
}
|
|
}, function () {
|
|
var klass = this;
|
|
// TODO: [HACK] Steal from cartesian series.
|
|
klass.prototype.onAxesChanged = Ext.chart.series.Cartesian.prototype.onAxesChanged;
|
|
klass.prototype.getSprites = Ext.chart.series.Cartesian.prototype.getSprites;
|
|
});
|
|
|