关于android软件编程中如何画函数折线图的问题

发布网友发布时间：2022-04-20 02:32

共2个回答

懂视网时间：2022-04-20 06:53

canvas画直角坐标系

2017年3月17日

利用canvas画直角坐标系其实挺简单的，只要确定了原点（0，0）点，也可以是其他的点，只要自己知道那是原点就行！知道了原点再分别向X轴方向和Y轴方向画两条直线即可（X轴和Y轴也是相对的，这个纯看个人喜好和实际需求）。

闲话不多说直接看代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>canvas画直角坐标系和柱状图</title>
 </head>
 <body>
 <h1>canvas画直角坐标系及柱状图</h1>
 <canvas id="canvas" width="600" height="400">如果您只看到了这句话，那么您的浏览器该升级换代了！</canvas>
  <!--canvas的宽高即可以设置成行内样式，也可以通过Js设置，不过建议设置成行内样式-->
 <script src="js/drawChart.js" type="text/javascript" charset="utf-8"></script>
 <!--为了表现与样式分离同时为了页面简洁，引入一个外部js文件-->
 <script type="text/javascript">
  var canvas=document.getElementById("canvas");
  var cxt = canvas.getContext("2d");
  //通过id获取canvas画布，并获得cxt画笔，canvas目前只支持2d效果，所以“2d”不能省；
  
  var arr = [16,15,20,21]//利用数组模拟柱状图的数据
  Coordinate(50,350);//自己写的一个直角坐标系
  ColumnChart1(50,350,arr); //一个简单的柱状图函数 
  /*为了有个简单的动画效果，canvas绘制完成以后先将它隐藏，然后用jQuery的slideDown（）方法淡入显示*/
  $("#canvas").hide();
  $("#canvas").slideDown(1000); 
 </script>
 </body>
</html>

然后就是直角坐标系的绘制方法（如果那位大神看到了功能更加完善，代码量可以更加精简的，请不吝赐教，谢谢）：

function Coordinate(x,y){
 //x为横坐标起点，Y为纵坐标起点
  var originX = x;
  var originY = y;
  //设置原点的那个文字的样式，并绘制出来
  cxt.font = "2rem 微软雅黑";
  cxt.fillText("0",originX-10,originY+15);//此处-10和+15是为了调整字的位置

  cxt.strokeStyle = "black";//设置坐标系X轴Y轴的颜色，绘制线条用strockeStyle属性，绘制填充色块用fillStyle属性；
  cxt.lineWidth = 3;//设置线条粗细，这里为了方便看设置了3个像素，可以根据情况自行调整
  //开始绘制Y轴
　　　　 cxt.beginPath();//开启路径
  cxt.moveTo(originX,originY);//x轴与y轴的起点位置
  cxt.lineTo(originX,originY-320);//轴的终点位置，即X大小不变，只是改变了Y点位置（根据实际情况做调整）；
  cxt.stroke();//将这条线绘制出来
  //画小箭头
  cxt.moveTo(originX,originY-320);//小箭头起点位置即为Y轴终点位置
  cxt.lineTo(originX+3,originY-310);//originX+3和originY-310是设置小箭头的终点位置，小箭头的大小和尖锐程度请自行摸索
  cxt.stroke();
  cxt.moveTo(originX,originY-320);
  cxt.lineTo(originX-3,originY-310);
  cxt.stroke();
  //画横坐标
 　　　//绘制X轴和Y轴相似
  cxt.moveTo(originX,originY);
  cxt.lineTo(originX+450,originY);
  cxt.stroke();
  //画小箭头
  cxt.moveTo(originX+450,originY);
  cxt.lineTo(originX+440,originY-3);
 cxt.stroke();
  cxt.moveTo(originX+450,originY);
  cxt.lineTo(originX+440,originY+3);
  cxt.stroke();
  cxt.fillText("Y轴",originX-5,originY-325)
 }

然后就是柱状图的绘制方法：

function ColumnChart1(x,y,arr){
 //绘制之前先清空原有的柱状图所占区域
 cxt.clearRect(x,y,500,0);
 var arrColor = ["red","yellow","blue","purple","green","mauve"];//为了使每个柱子的颜色不一样，如果可以尽量用#******或rgb（）方法设置颜色，因为我这样直接用单词有些浏览器对个别颜色不识别（头疼的IE）
 //请务必保持x，y值与坐标系的x，y值相同
 this.arr= arr;
 for (var i=0;i<arr.length;i++ ) {//for循环用来遍历数组内数据
  if(i==0){
   var originX = x+40;
   var originY = y-1;
  }else{
   var originX = i*70+80;
   var originY = y-1;
  }
  cxt.beginPath();
  cxt.strokeStyle = arrColor[i];//设置线条颜色
  cxt.lineWidth = 20;//这里为了方便直接将线条的宽度设置为20，这样就可以模拟柱子
  cxt.moveTo(originX+(i+1)*20,originY);//柱子的顶点位置，这里因为数组内数字小，所以都乘十了，这样有利于小数字的表现
  cxt.lineTo(originX+(i+1)*20,originY-(arr[i]*10));//调整每根柱子的间距；
  cxt.stroke(); 
  cxt.font = "20px 宋体"
  cxt.fillText(arr[i],originX+(i+1)*20-10,originY-(arr[i]*10+3));
  //文字的绘制
  cxt.font = "13px 宋体"
  cxt.fillText("第"+(i+1)+"季度业绩",originX+(i+1)*20-35,originY+20)
  }
 }

如果还想图表看起来更加美观，可以用canvas提供的shadowColor、shadowOffsetX、shadowOffsetY等相关属性设置阴影。

同时以柱子的顶点为圆心画一个颜色略异于柱子的椭圆即可。

热心网友时间：2022-04-20 04:01

用Canvas的drawLine方法就可以了canvas.drawLine(startX, startY, stopX, stopY, paint);
startX, startY为起始坐标；
stopX, stopY为终点坐标；
paint就是一个Paint对象；
比如你的横坐标的第一个坐标是(1, 2), 第二个坐标是(2, 5), 第三个坐标是(3, 10),那么这段折线可以这样画：
canvas.drawLine(1,2,2,5,paint);
canvas.drawLine(2,5,3,10,paint);
以此类推，剩下的3段折线都可以这样画出来