<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
- <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<pre class="prettyprint lang-js"><span id='Ext-chart-series-Radar'>/**
</span> * @class Ext.chart.series.Radar
* @extends Ext.chart.series.Series
- *
- * Creates a Radar Chart. A Radar Chart is a useful visualization technique for comparing different quantitative values for
+ *
+ * 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
+ *
+ * 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:
- *
- * {@img Ext.chart.series.Radar/Ext.chart.series.Radar.png Ext.chart.series.Radar chart series}
*
+ * @example
* var store = Ext.create('Ext.data.JsonStore', {
* 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}
+ * { '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 }
* ]
* });
- *
+ *
* Ext.create('Ext.chart.Chart', {
* renderTo: Ext.getBody(),
* width: 500,
* showMarkers: true,
* markerConfig: {
* radius: 5,
- * size: 5
+ * size: 5
* },
* style: {
* 'stroke-width': 2,
* 'stroke-width': 2,
* fill: 'none'
* }
- * }]
+ * }]
* });
- *
- * In this configuration we add three series to the chart. Each of these series is bound to the same categories field, `name` but bound to different properties for each category,
- * `data1`, `data2` and `data3` respectively. All series display markers by having `showMarkers` enabled. The configuration for the markers of each series can be set by adding properties onto
- * the markerConfig object. Finally we override some theme styling properties by adding properties to the `style` object.
- *
+ *
+ * In this configuration we add three series to the chart. Each of these series is bound to the same
+ * categories field, `name` but bound to different properties for each category, `data1`, `data2` and
+ * `data3` respectively. All series display markers by having `showMarkers` enabled. The configuration
+ * for the markers of each series can be set by adding properties onto the markerConfig object.
+ * Finally we override some theme styling properties by adding properties to the `style` object.
+ *
* @xtype radar
*/
Ext.define('Ext.chart.series.Radar', {
type: "radar",
alias: 'series.radar',
-
+
rad: Math.PI / 180,
showInLegend: false,
* An object containing styles for overriding series styles from Theming.
*/
style: {},
-
+
constructor: function(config) {
this.callParent(arguments);
var me = this,
*/
drawSeries: function() {
var me = this,
- store = me.chart.substore || me.chart.store,
+ store = me.chart.getChartStore(),
group = me.group,
sprite,
chart = me.chart,
first = chart.resizing || !me.radar,
axis = chart.axes && chart.axes.get(0),
aggregate = !(axis && axis.maximum);
-
+
me.setBBox();
maxValue = aggregate? 0 : (axis.maximum || 0);
-
+
Ext.apply(seriesStyle, me.style || {});
-
+
//if the store is empty then there's nothing to draw
if (!store || !store.getCount()) {
return;
}
-
+
me.unHighlightItem();
me.cleanHighlights();
me.renderLabels();
me.renderCallouts();
},
-
+
// @private draws the markers for the lines (if any).
drawMarkers: function() {
var me = this,
surface = chart.surface,
markerStyle = Ext.apply({}, me.markerStyle || {}),
endMarkerStyle = Ext.apply(markerStyle, me.markerConfig),
- items = me.items,
+ items = me.items,
type = endMarkerStyle.type,
markerGroup = me.markerGroup,
centerX = me.centerX,
centerY = me.centerY,
item, i, l, marker;
-
+
delete endMarkerStyle.type;
-
+
for (i = 0, l = items.length; i < l; i++) {
item = items[i];
marker = markerGroup.getAt(i);
}
}
},
-
+
isItemInPoint: function(x, y, item) {
var point,
tolerance = 10,
centerY = me.centerY,
point = item.point,
endLabelStyle = Ext.apply(me.seriesLabelStyle || {}, config);
-
+
return me.chart.surface.add(Ext.apply({
'type': 'text',
'text-anchor': 'middle',
hidden: true
},
true);
-
+
if (resizing) {
label.setAttributes({
x: centerX,
y: centerY
}, true);
}
-
+
if (animate) {
label.show(true);
me.onAnimate(label, {
}
},
- // @private for toggling (show/hide) series.
+ // @private for toggling (show/hide) series.
toggleAll: function(show) {
var me = this,
i, ln, shadow, shadows;
}
}
},
-
+
// @private hide all elements in the series.
hideAll: function() {
this.toggleAll(false);
this.hideMarkers(0);
},
-
+
// @private show all elements in the series.
showAll: function() {
this.toggleAll(true);
},
-
+
// @private hide all markers that belong to `markerGroup`
hideMarkers: function(index) {
var me = this,
git.ithinksw.org / extjs.git / blobdiff