This article is published by NetEase Cloud
Author: Zhang Song (This article is only for internal sharing in Zhihu. If you need to reprint, please obtain the author's consent and authorization.)
Last night, several product managers of NetEase saw a picture of this type when they passed by the display screen developed:
So I thought, can you make such a picture? As a well-known developer, I thought about it for a while, opened my brain, and combined with the new functions of NetEase Youshu recently, I felt that it could be realized, so I started to make one.
First of all, we need to see what the x-axis and y-axis of the above figure are. Although x shows the month, it is actually the date axis, and the date is mapped to the date axis of "year-week", and these dates have time. Scoped, which means we need to add a date filter. The y-axis here is the "day of week". Here we use the most commonly used supermarket order data sources to try to make such a chart.
First insert a "chart" control, first to complete the work of placing the x and y axes.
We put the year on the X-axis and select the year-week-date mapping function. Since there are more than 200 columns, we can add a filter to it, put the order date into the filter, and click on more date filtering methods in the lower left corner. And use the list filter, select 2011.
Next drag and drop the order date on the Y axis and select the date (week) date mapping function. This gives you 1 to 7 on the Y axis, representing a 7 day week axis.
Here, some people automatically infer this kind of chart as a table, rather than a small square. This is because the chart type in all the property panels is automatic, and Netease has a number that thinks that the table is the best in this case. We can change the "automatic" in all properties to "side-by-side histogram", so we get the following picture:
We can adjust the scheduling of the following chart controls to make the bars inside squares:
It can be seen that the color of these small squares has no shade, this is because the color does not have any measure, because the color of the small square diagram in gitlab represents the number of commits, so the "all properties" panel There should be a measure on the color of the , here we can drag the data from the order into "color":
It can be seen that our previous control size is destroyed by the number of legends in the upper left corner. In order to remove it, we can remove the check mark before the legend in the "Style" tab of the "Chart" panel, and there is no legend in the original image. The axis can also be adjusted to transparent or white in the style:
These interactions are not interactive in the drawing area of the chart. If there are several in the future, it will be better if the experience is added. So the picture looks like this:
Now see if there is any difference compared to gitlab's graph? First of all, there are axis names, which are the above year and week (order date) and the week on the left (order date). Just double-click the chart to enter the edit page, right-click in the corresponding area and select "Hide Name" to do this. a little. (I humbly think that the scheme here should be changed to hide the axis name). The other is the hiding of the title, which is the line "Quantity (divided by week (order date), year and week (order date))", which is set in the first line in the "Style" tab. Well, the following chart becomes:
There are several differences. One is the color of the square, which only needs to be set in the "Color" panel. The other difference is the format of the X-axis, which can be displayed on the date of the X-axis order date capsule. format, however, the English month option is not available in this list. But since the part that deals with the date format is done by me, in fact, our server supports this kind of month, we just need to change the format to MMM. "God mode to do this", so you get:
However, there is still no way to display only one for a month. The step size needs to be configured here, but we have not opened this entry, so we cannot do the same. In addition, there is the problem of the left axis. The format of the week is not the first letter of English and the start of the week is not Sunday but Monday. This was also discussed during the product design, and it may be considered to allow users to set it in the future. This point of the initials can be done with a calculated field, but with a little trouble, this calculated field is as follows:
IF DAYOFWEEK([订单日期]) = 1 THEN "Mon"
ELSE IF DAYOFWEEK([订单日期]) = 2 THEN "Tue"
ELSE IF DAYOFWEEK([订单日期]) = 3 THEN "Wed"
ELSE IF DAYOFWEEK([订单日期]) = 4 THEN "Thu"
ELSE IF DAYOFWEEK([订单日期]) = 5 THEN "Fri"
ELSE IF DAYOFWEEK([订单日期]) = 6 THEN "Sat"
ELSE IF DAYOFWEEK([订单日期]) = 7 THEN "Sun"
However, since the current number does not support self-ordering and only supports alphabetical ordering, Fri will be ranked first, Mon will be second, and Wed will be the last. In essence, it should be a date data dictionary, but this date has a date mapping function, and there are some problems with the setting of this data dictionary, so it cannot meet the needs here at present.
Summarize:
Judging from the above process, some are very powerful for making charts, because it is still possible to make some charts according to cats and tigers. The heat map here confirms this. It is achieved through various The placement of the data capsule and the configuration of the style are obtained. However, in some details, such as the hidden axis name, title name and other configuration entries, it needs to be comprehensively sorted out. The date format of the month is added or opened for users to configure by themselves. The step value of the date also needs to be opened for users to configure. In addition, there are functions such as custom sorting settings and more powerful data dictionaries. These details really need a long time to be carefully polished.
After reading this article, do you want to try it yourself? Come on.
Learn about NetEase Cloud :
NetEase Cloud official website: https://www.163yun.com/
New user gift package: https://www.163yun.com/gift
NetEase Cloud Community: https://sq.163yun.com/