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

Today, the editor will share with you the relevant knowledge points about how to achieve the circular pie chart in Canvas. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

First of all, let's talk about the train of thought:

The layout is very simple, so I won't write it. I'll mainly talk about the drawing process.

First of all, according to the requirements of the figure, you can know that to achieve such an effect, you need a group of objects, each object has a color, proportion, name, and so on, and that's it:

Let chartData= [{color: "# FD7A4F", title: "other", percent:0.2}, {color: "# FDD764", title: "Architecture / Civil Engineering", percent:0.25}, * *]

Note that the percentage must add up to 100%, that is, 1, otherwise the circle may not be full, or multiple parts.

Calculate the radians of each part according to the proportion of each part, and use ctx.arc (x0, Y0 ~ r, startAngle, endAngle); draw an arc, the current item needs to be offset outward, and the code says this part in the process:

First define a multiCircleChart class

/ / ES6 Writing class multiCircleChart {constructor (id, chartDatas, defalutIndex,callback) {/ * constructor: the id of the passed parameter ID,canvas, which is used to place the drawing content; chartDatas: parameter data required for drawing DefalutIndex:defalutIndex: currently selected callback: click the callback function of the ring chart * / this.canvas = document.getElementById (id); this.size = this.canvas.clientWidth * 4; this.canvas.style.width = this.size / 4 + "px"; this.canvas.style.height = this.size / 4 + "px"; this.canvas.width = this.size This.canvas.height = this.size; / * because drawing requires multiple times on the mobile side, so the image will be very clear, so here the context of size, that is, canvas, is set to 4 times the size of canvas Attention:! Canvas.width refers to the size of the canvas content (context), and cavas.style.width is the size of the canvas displayed on the page, that is to say, the real picture is 4 times the size of the displayed picture * / this.ctx = this.canvas.getContext ("2d"); this.defalutIndex = defalutIndex;// currently selected this.chartDatas = chartDatas;// required data for drawing this.lineWidth = this.size/5 / / the ring width of the circular graph, which is set to 1 to 5 of the width of canvas This.startAngle =-0.5 0.5*Math.PI / the starting angle of the circular graph, here is-0.5, which is the angle of the highest point of the circular graph in the coordinate system. By the way, 0 on the right, 0.5 on the bottom, and 1 this.callback=callback; this.canvas.addEventListener on the left ('click',this.mouseDownEvent.bind (this)); / * add a listening function to canvas and pass the event to calculate which data item the click location is in * / this.AngleList= [] / / record the end angle of each item, combined with the monitoring event, calculate which data item the location of the click event is in}}

Now that the constructor is written, you need to draw a circle:

Class multiCircleChart {* draw () {this.ctx.clearRect; / / clear the canvas before each painting to prevent it from being contaminated if (this.chartDatas.length = = 0) return;// if the passed parameter length is 0, there is no need to continue to draw this.ctx.lineWidth = this.lineWidth / / assign a value for the width of the ring let startAngle = Math.PI *-0.5 position bank / set the starting angle let endAngle = startAngle; set the end angle this.AngleList= []; / * Let's start drawing * / this.chartDatas.map ((item, I) = > {this.ctx.beginPath () / / start drawing command, avoid adhesion this.ctx.strokeStyle = item.color;// set border color, because we draw a circle, so fill color is not needed, as long as there is a border color on the line if (I > 0) {/ / starting from the second item (item1), the starting angle is the last ending angle startAngle = endAngle } endAngle = startAngle + item.percent * Math.PI * 2 this.AngleList.push / calculate the end angle of the current item, calculate the angle according to the percentage (item.percent * Math.PI * 2), and then combine the starting angle to calculate the real offset angle (startAngle + item.percent * Math.PI * 2) this.AngleList.push (endAngle). / / if you select the current item, you need to offset if (I = = this.defalutIndex) {/ * if you select the current item, you need to offset outward using the intermediate value between the start angle and the end angle to calculate the offset position * / let centerAngle= (startAngle+endAngle) / 2 Let x=this.lineWidth*0.2*Math.cos (centerAngle); / / x axis offset let y=this.lineWidth*0.2*Math.sin (centerAngle); / / y axis offset / / the position of the center of the unselected item is (this.size / 2, this.size / 2), the center of the selected item needs to be offset, the center is (this.size / 2cm x, this.size / 2cm y) In this way, the drawn ring will be offset outward by 1 / 5 of the width of the ring. This.ctx.arc (this.size / 2-this.lineWidth / 2-this.lineWidth * 0.2, startAngle, endAngle);} else {this.ctx.arc (this.size / 2, this.size / 2, this.size / 2-this.lineWidth / 2-this.lineWidth * 0.2, startAngle, endAngle);} this.ctx.stroke () );}}

The picture drawn now is static, and there will be no change when you click on the ring graph, which is also available now:

Let circlePeiChart = new multiCircleChart ("circle-pei-chart", chartDatas,defalutIndex,); / / new a circlePeiChart.draw (); / / draw a picture

External toggle selected:

CirclePeiChart.defalutIndex=2;// modifies the selected index value circlePeiChart.draw (); / / redraws

So how to click canvas to switch the current option, the idea is very simple: take the center of the canvas as the center, monitor the click position, connect the click position with the center of the circle, take the Cartesian coordinate system as a reference, calculate the Radian of the click position, compare with angleList, calculate the number of items clicked, and then modify defalutIndex and redraw canvas.

Class multiCircleChart {* mouseDownEvent (e) {const [x1Powery1] = [e.offsetXree.offsetY]; / / Click the event location const [x0memy0] = [this.size/2/4,this.size/2/4]; / / Origin location Note: the origin is canvas center, not context center let angle=0; if (x1 > x0) {/ / Click position in the first quadrant (y1 > y0) or the second quadrant (y1)

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.