Use canvas to draw a line chart and canvas to draw a line chart
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> coordinate point connection </title>
<Style>
Canvas {
Border: 1px solid red;
}
</Style>
</Head>
<Body>
<Canvas width = "600" height = "400" id = "canvas"> </canvas>
</Body>
<Script>
Var canvas = document. getElementById ('canvas ');
Var ctx = canvas. getContext ('2d ');
Var padding = 30;
Var arrowHeight = 20,
ArrowWidth = 10;
Var x0 = padding,
Y0 = canvas. height-padding;
Var maxX = canvas. width-padding * 2-arrowHeight,
MaxY = canvas. height-padding * 2-arrowHeight;
// Draw the coordinate axis
// X axis
Ctx. moveTo (x0, y0 );
Ctx. lineTo (x0, y0-maxY-arrowHeight );
// Y axis
Ctx. moveTo (x0, y0 );
Ctx. lineTo (x0 + maxX + arrowHeight, y0 );
Ctx. stroke ();
// Draw arrows
// X axis
Ctx. beginPath ();
Ctx. moveTo (x0 + maxX + arrowHeight, y0 );
Ctx. lineTo (x0 + maxX, y0-arrowWidth * 0.5 );
Ctx. lineTo (x0 + maxX + arrowHeight * 0.5, y0 );
Ctx. lineTo (x0 + maxX, y0 + arrowWidth * 0.5 );
// Y axis
Ctx. moveTo (x0, y0-maxY-arrowHeight );
Ctx. lineTo (x0-arrowWidth * 0.5, y0-maxY );
Ctx. lineTo (x0, y0-maxY-arrowHeight * 0.5 );
Ctx. lineTo (x0 + arrowWidth * 0.5, y0-maxY );
Ctx. fill ();
// Draw points
Ctx. beginPath ();
Var data = [[10, 20], [15, 13], [17, 30], [30, 10], [20, 15];
// Retrieve the vertex data
/* Find the maximum values of X and Y, because a proportional conversion is required:
Coordinate point/max coordinate = coordinate point on the page/maximum value of the axis of the canvas */
Var pointX = Math. max. apply (null, data. map (function (v) {return v [0] ;}));
Var pointY = Math. max. apply (null, data. map (function (v) {return v [1] ;}));
// Use Bubble Sorting
For (var I = 0; I <data. length-1; I ++ ){
For (var j = 0; j <data. length-1-i; j ++ ){
If (data [j] [0]> data [j + 1] [0]) {
Var temp = data [j + 1];
Data [j + 1] = data [j];
Data [j] = temp;
}
}
}
// Declare a new array for data storage
Var arr = [];
For (var I = 0; I <data. length; I ++ ){
Var tempX = data [I] [0]/pointX * maxX,
TempY = data [I] [1]/pointY * maxY;
// Remember the last step of Coordinate Conversion
Var X = x0 + tempX,
Y = y0-tempY;
Arr. push ([X, Y]);
Ctx. moveTo (X-4, Y-4 );
Ctx. lineTo (X-4, Y + 4 );
Ctx. lineTo (X + 4, Y + 4 );
Ctx. lineTo (X + 4, Y-4 );
}
Console. log (arr );
Ctx. fill ();
// Draw a line
Ctx. beginPath ();
// Compare the value and optimize the line
Arr. forEach (function (v, I ){
Ctx [['moveto ', 'line'] [I> 0? 1:0] (v [0], v [1]);
})
/* For (var I = 0; I <data. length-1; I ++ ){
Var tempX = data [I] [0]/pointX * maxX,
TempY = data [I] [1]/pointY * maxY;
Var tempX1 = data [I + 1] [0]/pointX * maxX,
TempY1 = data [I + 1] [1]/pointY * maxY;
// Remember the last step of Coordinate Conversion
Var X = x0 + tempX,
Y = y0-tempY,
X1 = x0 + tempX1,
Y1 = y0-tempY1;
Ctx. moveTo (X, Y );
Ctx. lineTo (X1, Y1 );
}*/
Ctx. stroke ();
</Script>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
