Pie chart implementation for drawing WeChat applets

This article mainly introduces the information about the implementation of the pie chart for small program plotting. if you need it, you can refer to the introduction of the small program, which will undoubtedly trigger a storm in the mobile Internet industry. Some people will question whether a small program will get angry or not. I don't know if it will get angry. the number of users can understand everything. Here we will first learn how to implement the small program plotting function.

Javascript files

Page ({onReady: function () {// Page rendering complete // create context var context = wx. createContext (); // pie chart // data source var array = [20, 30, 40, 40]; var colors = ["# ff0000", "# ffff00 ", "# 0000ff", "#00ff00"]; var total = 0; // calculation problem for (index = 0; index <array. length; index ++) {total + = array [index];} // defines the center coordinate var point = {x: 100, y: 100 }; // define the radius. var radius = 60;/* traverse all pie loops */for (I = 0; I <array. length; I ++) {context. beginPath (); // start Radian var start = 0; if (I> 0) {// calculate the start Radian as the sum of the first few items, that is, continue painting from the previous base for (j = 0; j <I; j ++) {start + = array [j]/total * 2 * Math. PI ;}} console. log ("I:" + I); console. log ("start:" + start); // 1. first pie // 2. draw an arc and fill it with a triangle pie. The first two parameters determine the center of the center. The 3rd parameter is the radius, the 4th parameter starts to rotate the radians, and the 5th parameter is the radians swept this time, the first parameter is clockwise-false. arc (point. x, point. y, radius, start, array [I]/total * 2 * Math. PI, false); // 3. connect to the center context. lineTo (point. x, point. y); // 4. fill the style context. setFillStyle (colors [I]); // 5. fill the action context. fill (); context. closePath ();} wx. drawCanvas ({canvasId: 'canvas2', actions: context. getActions ()});}})

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more information about how to use a pie chart for small program plotting, see PHP!