Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to draw a linear statistical chart in UnityUI", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to draw a linear statistical chart in UnityUI" article.

Let's start with an effect picture.

If you don't think it looks good, you can adjust it yourself.

1. Draw data points

A linear graph is generally composed of data points and lines.

Before drawing the connection, let's mark the data points.

Here I choose to use Image pictures to draw data points.

Create a new Canvas and add an empty object Graph

Add empty objects GraphContainer and Image BackGround to Graph

Add Image BackGround to GraphContainer

Modify the size and color of the two BackGround to make the background

Note: here the GraphContainer anchor is in the lower left corner.

The lower left corner defaults to the origin (0re0), after which all graphics will be drawn within the GraphContainer

Create a new script MyGraph on Graph

Public class MyGraph: MonoBehaviour {[SerializeField] private Sprite circleSprite; / / the image to be drawn. Here the value is assigned to a circle that comes with Unity, or it can be changed to other graphic private RectTransform graphContainer. / / declare a RectTransform, which is used to modify the size of the image private void Awake () {/ / get the RectTransform of the graphContainer and assign it as a small rectangle on the inside, which will serve as our artboard graphContainer = transform.Find ("GraphContainer"). GetComponent (); CreateCircle (new Vector2 (200,200)) / create a circle at (200200) to test} private void CreateCircle (Vector2 anchoredPosition) {GameObject gameObject = new GameObject ("circle", typeof (Image)); / / generate a new object containing a picture component gameObject.transform.SetParent (graphContainer, false); / / set the picture as a child of graphContainer gameObject.GetComponent (). Sprite = circleSprite / / assign the picture to the picture set in Inspector / / get the RectTransform of the newly created image object and assign the value RectTransform rectTransform = gameObject.GetComponent (); rectTransform.anchoredPosition = anchoredPosition; / / set the picture position rectTransform.sizeDelta = new Vector2 (20,20) / / set the image size to a public variable to modify / / the following two sentences set the anchor point of the generated image to the lower-left corner (origin) of the parent object rectTransform.anchorMin = new Vector2 (0,0); rectTransform.anchorMax = new Vector2 (0,0);}}

A point will appear after running.

two。 Draw multiple dots according to the input of List list

Continue to modify MyGraph

Public class MyGraph: MonoBehaviour {/ / [SerializeField] / / private Sprite circleSprite; / / private RectTransform graphContainer; private void Awake () {/ / graphContainer = transform.Find ("GraphContainer"). GetComponent (); / / declare a list for testing List valueList = new List () {1, 2, 4, 9, 16, 25, 36, 49, 64, 81, 100, 80, 50, 20, 10}; ShowGraph (valueList) } private void CreateCircle (Vector2 anchoredPosition) {. } private void ShowGraph (List valueList) {int maxValue = 0; foreach (int value in valueList) / / find the maximum value in the list {if (maxValue)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.