ExtJS (5)-Chart of EXT5 charts

Source: Internet
Author: User

Today the system organizes the use of the chart in EXT5 and some problems encountered.


The first is the reference to the chart in EXT5, the chart API will be set in the Ext-all.js in the previous version of 5, but not in the 5, if we only introduce ext-all.js, we will not find the chart API, we also need to introduce the following JS

<script type= "Text/javascript" src= "Ext-5.0.0/build/packages/ext-charts/build/ext-charts.js" ></script >


After successful introduction of the API, we will generate a variety of chart to see that 5 of the call API compared to 4 also has a significant change, the specific call we can directly refer to the official example


Next, let's take a look at some of the problems I have, let's start with the line Chart (Marked), first of all, let's examine the official example:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/57/1F/wKioL1SSR1Xg6KJkAAGfrwTB-cA404.jpg "title=" Line.png "alt=" Wkiol1ssr1xg6kjkaagfrwtb-ca404.jpg "/>

This figure we can run the same as the official sample code, but when we click on the legend on the right side, we have an exception to the display:

The following official example diagram

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/57/1F/wKioL1SSSAahURwYAAFasgBpKe8715.jpg "title=" Rightline.png "alt=" Wkiol1sssaahurwyaafasgbpke8715.jpg "/>

The following is our experimental diagram

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/57/21/wKiom1SSR4vAZOVdAAGtnT87vsk511.jpg "title=" Wrongline.png "alt=" wkiom1ssr4vazovdaagtnt87vsk511.jpg "/> We found that the red and blue lines that should have been hidden when we clicked on" Firefox "and" Chrome "were not hidden, And stay in the original position, and the Green Line and yellow line with the adjustment of the Y axis upward movement, so that the stay of the red and Blue Line and the Y axis does not correspond.

Let's look at some other exceptions:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/57/1F/wKioL1SSSxWBgzNNAAGnNlt47bA410.jpg "style=" float: none; "title=" Clustered.png "alt=" Wkiol1sssxwbgznnaagnnlt47ba410.jpg "/>

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/57/22/wKiom1SSSnOjRSWlAAF7V_cVyDQ574.jpg "style=" float: none; "title=" Stacked.png "alt=" Wkiom1sssnojrswlaaf7v_cvydq574.jpg "/>

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/57/1F/wKioL1SSSxXAHkyBAAFUzDztglM787.jpg "style=" float: none; "title=" Pareto.png "alt=" Wkiol1sssxxahkybaafuzdztglm787.jpg "/>

There are similar problems with these bars and lines, which do not exist in the Ext4.2 version, and none of the 5.0 official examples exist. But the API referenced by the official example is not consistent with ours, so the problem is likely to be on the ext-charts.js we've introduced.

or the official version of the ext-charts.js is problematic.

One way to do this is to actively study how the API is introduced in the official example, and to wait for Ext5.0.1 to see if the issue is still present in the new version of the API.


This article is from the "Snow July" blog, please be sure to keep this source http://xuepiaoqiyue.blog.51cto.com/4391594/1591308

ExtJS (5)-Chart of EXT5 charts

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.