My personal blog is: www.ourd3js.com
CSDN Blog for: blog.csdn.net/lzhlzz
Reprint please indicate the source, thank you.
The previous sections explain icons, axes, scales, and so on, and this section integrates these into a practical chart. The result diagram is as follows:
The code looks like this:
The following sections explain the above code separately:
- 31-34 rows: Randomly generated data, assigned to array
- 36-38 rows: Defining SVG
- 40-54 rows: Define scale (proportions) and axes of the axis, 48 behavior X-axis, 52 behavior Y-axis
- 56-62 rows: Define the scale of the column chart
- 64-78 line: Draw a column chart, pay attention to the use of scale
- 80-98 lines: Draw text labels, same note scale
- 100-108 rows: Drawing axes
Note: When drawing, pay attention to the order of the drawing, otherwise you may be able to overwrite some of the necessary things. Especially the axis, preferably put to the last draw.
