123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <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>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-chart-Callout'>/**
- </span> * @class Ext.chart.Callout
- * A mixin providing callout functionality for Ext.chart.series.Series.
- */
- Ext.define('Ext.chart.Callout', {
- /* Begin Definitions */
- /* End Definitions */
- constructor: function(config) {
- if (config.callouts) {
- config.callouts.styles = Ext.applyIf(config.callouts.styles || {}, {
- color: "#000",
- font: "11px Helvetica, sans-serif"
- });
- this.callouts = Ext.apply(this.callouts || {}, config.callouts);
- this.calloutsArray = [];
- }
- },
- renderCallouts: function() {
- if (!this.callouts) {
- return;
- }
- var me = this,
- items = me.items,
- animate = me.chart.animate,
- config = me.callouts,
- styles = config.styles,
- group = me.calloutsArray,
- store = me.chart.store,
- len = store.getCount(),
- ratio = items.length / len,
- previouslyPlacedCallouts = [],
- i,
- count,
- j,
- p,
- item,
- label,
- storeItem,
- display;
-
- for (i = 0, count = 0; i < len; i++) {
- for (j = 0; j < ratio; j++) {
- item = items[count];
- label = group[count];
- storeItem = store.getAt(i);
-
- display = config.filter(storeItem);
-
- if (!display && !label) {
- count++;
- continue;
- }
-
- if (!label) {
- group[count] = label = me.onCreateCallout(storeItem, item, i, display, j, count);
- }
- for (p in label) {
- if (label[p] && label[p].setAttributes) {
- label[p].setAttributes(styles, true);
- }
- }
- if (!display) {
- for (p in label) {
- if (label[p]) {
- if (label[p].setAttributes) {
- label[p].setAttributes({
- hidden: true
- }, true);
- } else if(label[p].setVisible) {
- label[p].setVisible(false);
- }
- }
- }
- }
- config.renderer(label, storeItem);
- me.onPlaceCallout(label, storeItem, item, i, display, animate,
- j, count, previouslyPlacedCallouts);
- previouslyPlacedCallouts.push(label);
- count++;
- }
- }
- this.hideCallouts(count);
- },
- onCreateCallout: function(storeItem, item, i, display) {
- var me = this,
- group = me.calloutsGroup,
- config = me.callouts,
- styles = config.styles,
- width = styles.width,
- height = styles.height,
- chart = me.chart,
- surface = chart.surface,
- calloutObj = {
- //label: false,
- //box: false,
- lines: false
- };
- calloutObj.lines = surface.add(Ext.apply({},
- {
- type: 'path',
- path: 'M0,0',
- stroke: me.getLegendColor() || '#555'
- },
- styles));
- if (config.items) {
- calloutObj.panel = new Ext.Panel({
- style: "position: absolute;",
- width: width,
- height: height,
- items: config.items,
- renderTo: chart.el
- });
- }
- return calloutObj;
- },
- hideCallouts: function(index) {
- var calloutsArray = this.calloutsArray,
- len = calloutsArray.length,
- co,
- p;
- while (len-->index) {
- co = calloutsArray[len];
- for (p in co) {
- if (co[p]) {
- co[p].hide(true);
- }
- }
- }
- }
- });
- </pre>
- </body>
- </html>
|