Home > Developer > Web Develop
Legend, translated by means of a legend.
What does it mean in ExtJS's chart? Look directly at this picture:
The red box on the right is the legend.
In the definition of the ExtJS Chart, you can set the location and style of the legend display by configuring the Legend configuration Value (configs):
Position Configuration Display Location: You can set the value to have "top", "bottom", "left", "right", or "float".
You can also set the legend display of the text, the style of the diagram, and so on, in detail, see the Ext.chart.Legend Reference document.
The specific settings are similar to the following:
No matter where you live, ExtJS Legend The default display method is a single row or column. (varies by location configuration)
Consult the legend reference documentation for all configurations, properties and methods that are not found, and how legend can be displayed in a branch or column method.
In the reference document of LegendItem, the method of Updateposition ( [relativeto] ) was found.
Legend is the entire legend, LegendItem should be the inside of every legend.
Then a solution was created:
1. Can I set the location of the LegendItem at the right time?
First question, what is the right time? Can be in the AfterRender event,
But the actual test found that the legend was not produced in the chart's AfterRender. This form, the Grid mechanism does not look the same.
No way, only the whole button can be clicked to see if the solution is feasible.
1) Get the legend of the chart
var chart = ext.getcmp ("Testchart"); var legend = Chart.legend;2) Get Chartitems
var legenditems = Legend.items;
3) Loop the above array, set the position of each item, the position is calculated by oneself (x, y coordinates)
Legenditem.updateposition ({x:xpos,y:ypos});Here, the problem is not over,
The item on the legend can be clicked, and after the click, the corresponding diagram can be displayed and hidden switch.
Using the above method, we found that after the click, it was back to the original.
Then came an idea,
2. Can I add to LegendItem, click event, recalculate location in click and Update/
Legenditem.on ("click", Function () {legenditem.updateposition ({x:xpos,y:ypos});});That is, LegendItem must have more than two points to trigger the function above.
and Dubug found that at this time legend item has two click events, one is native, one is later added.
There must be a problem with this approach.
So the above method can only declare failure.
Seems to be only from the ExtJS source level considerations.
ExtJS Chart's bottom-level technology is nothing more than SVG, VML.
For more information about this, refer to:
[One of the Web chart series]web-end graphics drawing svg,vml, HTML5 Canvas technology comparisonAnd ExtJS's chart is based on the Raphael framework. For more information about Raphael, refer to the official website:
http://raphaeljs.com/
The process of thinking is omitted, and the direct conclusion is: Rewrite the Updateposition method of Ext.chart.LegendItem and Ext.chart.Legend:
<!--ADD by oscar999--><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" ><HTML><HEAD><TITLE> New Document </ Title><meta name= "Author" content= "oscar999" ><script></script></HEAD><BODY>< /body>
Attention:1. The above is not a complete and perfect code, just a description of the POC code that can be used in this way
2. The position of the arrangement, you need to do the operation, multi-line, or multi-column?
Results and Summary
Finally, give the effect of the author's realization
Of course, if LegendItem is relatively small, branches and breakdowns do not make any sense.
The more suitable scenario is: LegendItem many, more than 20 or even 30, greatly affect the sense of the page.
However, in actual development, this situation should be relatively small.
If there is such a situation, we need to start from the careful consideration, try to avoid this demand, because even if developed, for so many series, the speed of natural fast.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
