Let's talk about work.

What I mentioned in the first article was what I did last year ~ I have summarized my canvas achievements last year.

The balance chart control was drawn using canvas in the last two days.

~ \ (Too many rows )/~ I have a sense of accomplishment. I did not use third-party controls.

Maybe this is not worth mentioning for some heroes, but I am really cool. Who told me that I am a small shrimp?

Post it to help me see what else can be improved

The following information can be configured:

"Colors": ['yellow', 'cyany'] // only two color blocks are configured as required.

"Ymax": 10

"Ycount": 5

"Numyticks": 10

'Xlabels': ["s1", "s2", "s12", "s23", "s3", "s4", "s5", "s7 ", "s9"]

This is the balance chart we have developed based on project requirements. From the configuration information, the scalability is not very strong # O__O "...~~~

But in the future, such a column chart will not beat me down.

Step 1 draw the XY axis:

Y axis is very easy to draw ~ First draw the vertical line of the Y axis, then draw the Y length of the horizontal line./numyticks: Use the moveTO and lineTo of the canvas.

The X axis is a rectangular gradient ~ This is not difficult.

Step 2 draw bars:

When drawing bars, pay attention to the maximum value, minimum value, and average value. Here the algorithm is designed to show how high each bars is in the canvas.

Algorithms are very important. They can completely determine the level of your controls. Good algorithms can make your controls look simple and powerful. On the contrary, it will be annoying to lock others. of

Remember to subtract half of the X axis from the bars.

The last step is to draw labels:

This is also very simple and strange ~ Some problems are not the same. Before that, it was really difficult for me to go to Qingtian, as long as I suddenly feel like so easy.

In my opinion, when I draw this image, I just need to calculate the coordinates of the corresponding points.

What is the extensibility of this control?