如何画多个折线图

Canvas之画多个折线图

千次阅读 2017-06-14 20:51:26

使用html画多个折线图,效果图如下: 二,代码片段(完整的代码在文章的最后) var a_canvas; var a_context; var b_canvas; var b_context; window.onload = function() { a_canvas = ...

一说明:
使用html画多个折线图,效果图如下:




二,代码片段(完整的代码在文章的最后)
<canvas id="a_canvas" width="850" height="450" ></canvas>
<script>
			var a_canvas;
			var a_context;

			var b_canvas;
			var b_context;

			window.onload = function() {
				a_canvas = document.getElementById('a_canvas');
				if(a_canvas && a_canvas.getContext) {
					a_context = a_canvas.getContext('2d');
				}

				b_canvas = document.getElementById('b_canvas');
				if(b_canvas && b_canvas.getContext) {
					b_context = b_canvas.getContext('2d');
				}

				a_centerX = a_canvas.width / 3, //Canvas三分之一x轴坐标
					a_centerY = a_canvas.height / 2, //Canvas中心点y轴坐标
					rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度

					whiteCircle(a_context, a_centerX, a_centerY);
				text(a_context, a_centerX, a_centerY);
				list(a_context, a_centerX, a_centerY);
				
				var white_data = [17, 3, 15, 5, 14, 3, 27, 5];
				var yellow_data = [10, 13, 5, 5, 4, 13, 27, 15];
				var white="white";
				var yellow="yellow";
				lineChart(b_context,b_canvas,white_data,white);//context,canvas,data,color
				lineChart(b_context,b_canvas,yellow_data,yellow);
			}
			//绘制内圈
			function whiteCircle(context, centerX, centerY) {
				context.save();
				context.beginPath();
				context.radius = 80;
				context.lineWidth = 80;
				context.strokeStyle = "#81EF7D";
				context.arc(centerX, centerY, 170, 0, Math.PI * 2, false);
				context.stroke();
				context.closePath();
				context.restore();
			}
			//文字绘制
			function text(context, centerX, centerY) {
				context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
				context.strokeStyle = "#81EF7D"; //设置描边样式
				context.fillStyle = "#1DABE2";

				context.font = "80px sans-serif"; //设置字体大小和字体

				//绘制字体，并且指定位置
				context.fillText("0", centerX - 20, centerY - 10);
				context.font = "40px sans-serif";
				context.fillText("延误总数", centerX - 75, centerY + 40);
				context.stroke(); //执行绘制
				context.restore();
			}

			function list(context, centerX, centerY) {

				context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
				context.beginPath();
				context.arc(centerX * 3 * 0.9 - 20, centerY * 2 * 0.9 - 10, 10, 0, 360, false);
				context.fillStyle = "#81EF7D";
				context.fill();
				context.closePath();
				context.strokeStyle = "#81EF7D"; //设置描边样式
				context.fillStyle = "black";
				context.font = "30px sans-serif";
				context.fillText("其他", centerX * 3 * 0.9, centerY * 2 * 0.9);

				context.stroke(); //执行绘制
				context.restore();
			}
			function lineChart(context,canvas,data,color) {
				
				// 绘制背景
				var gradient = context.createLinearGradient(0, 0, 0, 300);

				context.fillStyle = gradient;

				context.fillRect(0, 0, canvas.width, canvas.height);

				// 描绘边框
				var grid_cols = data.length + 1;
				var grid_rows = 8;
				var cell_height = canvas.height / grid_rows;
				var cell_width = canvas.width / grid_cols;
				context.lineWidth = 1;
				context.strokeStyle = "#a0a0a0";

				var max_v = 60;

				for(var i = 0; i < data.length; i++) {
					var d = 0;
					if(data[i] < 0) {
						d = d - data[i];
					} else { d = data[i]; };
					if(d > max_v) { max_v = d };
				}
				max_v = max_v * 1.0;
				// 将数据换算为坐标
				var points = [];
				for(var i = 0; i < data.length; i++) {
					var v = data[i];
					var px = cell_width * 　(i + 1);
					var py = canvas.height - canvas.height * (v / max_v);
					points.push({ "x": px, "y": py });
				}

				

				// 绘制折现
				context.beginPath();
				context.moveTo(points[0].x, points[0].y);
				for(var i = 1; i < points.length; i++) {
					context.lineTo(points[i].x, points[i].y);
				}

				context.lineWidth = 4;
				context.strokeStyle = color;
				context.stroke();

				//绘制坐标图形
				for(var i in points) {
					if(i < 19) {
						var p = points[i];

						context.beginPath();
						context.lineWidth = 4;
						context.radius = 4;
						context.strokeStyle = "white";
						context.fillStyle = color;
						context.arc(p.x, p.y, 7, 0, Math.PI * 2, false);

						context.stroke();
						context.fill();
						context.closePath();
					} else {

					}

				}

			}
		</script>




三,Demo地址(该demo还包换圆环,柱状图等等)

github地址:https://github.com/LuochuanAD/CanvasForHtml5

收起

展开全文

html5 html canvas ios

php结合echarts画多个折线图

千次阅读 2018-03-20 20:19:36

echarts是百度出的一个画图工具基本上是js写出来的，对于php来生成一个折线图或者饼图这些数据可视化来说是相当的方便。在工作中也会常遇到数据可视化的东西，一些简单的图可以用echarts特别的方便。还有hcharts这种...

echarts是百度出的一个画图工具基本上是js写出来的，对于php来生成一个折线图或者饼图这些数据可视化来说是相当的方便。
在工作中也会常遇到数据可视化的东西，一些简单的图可以用echarts特别的方便。还有hcharts这种的。今天我们以echarts来做例子。
下面直接上代码，首先对于一个图形要有一个html的画图的div
<div class="container">
    <div class="col-xs-12 col-sm-12">
        <div class="select">
            <span style="display:inline-block;">用户统计</span>
            <select name="" id="users">
                <option value="all"  selected="selected">全部</option>
                <option value="nochannel">自然流量</option>
                {foreach $sources as $source}
                <option value="{$source.id}">{$source.source_value}</option>
                {/foreach}
            </select>
        </div>


        <div id="user" style="width: 100%;height:200px;"></div>
    </div>
</div>
<hr style="height:1px;border:none;border-top:1px dashed #a1a3a6;" />
<div class="container">
    <div class="col-xs-12 col-sm-12">
        <div class="select">
            <span style="display:inline-block;">注册-申请通过率统计</span>
            <select name="" id="reg_credit">
                <option value="all" selected="selected">全部</option>
                <option value="nochannel">自然流量</option>
                {foreach $sources as $source}
                <option value="{$source.id}">{$source.source_value}</option>
                {/foreach}
            </select>
        </div>


        <div class="col-xs-12 col-sm-12">
            <div class="select">


            </div>
            <div id="register" style="width: 100%;height:200px;"></div>
        </div>
    </div>
</div>
下面是echarts主要的配置项
<script type="text/javascript">
    var data = JSON.parse('{$result}');//后端传输过来的数据
    var source_id = 'all';//这是默认的渠道就是全部的 我这样写的话就是数据量大的话会内存溢出 因为注册的话我们基本上会划分各个渠道这样可以更加的方便一点，当然还有一种方案就是，你可以给每一张图标写一个接口那样的话数据压力没有那么大
    var creditdata = data.creditdata.all;
        $('#users').change(function(){
            var source_id = $(this).children('option:selected').val();//这就是selected的值
            var myChart = echarts.init(document.getElementById('user'));
// 指定图表的配置项和数据
            var option = {
                tooltip : {
                    trigger: 'axis',
                },
                grid: {
                    x: 23,
                    y: 10,
                    x2:23,
                    y2:50
                },
                legend: {
                    data:['注册','申请人数','申请成功人数'],
                    x: 'center',
                    y: 'bottom',
                },
            {literal}
            toolbox: {
                show : true,
                    feature :{
                    mark :{show: true},
                }
            },
            {/literal}
            calculable : true,
                xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : {$data},
                    axisLabel:{ //调整x轴的lable
                        textStyle:{
                            fontSize:10,
                            color:"#a1a3a6"
                        }
                    }
                }
            ],
                yAxis : [
                {
                    type : 'value',
                    axisLabel:{ //调整x轴的lable
                        textStyle:{
                            fontSize:10,
                            color:"#a1a3a6"
                        }
                    },
                    splitLine:{
                        show:false
                    }
                }
            ],


                series : [
                {
                    name:'注册',
                    type:'line',
                    stack: '总量',
                    data:data['regdata'][source_id],




        },
            {
                name:'申请人数',
                    type:'line',
                stack: '总量1',
                data: data['creditdata'][source_id],


            },
            {
                name:'申请成功人数',
                    type:'line',
                stack: '总量2',
                data:data['creditsucdata'][source_id],


            },
            ]
        };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('register'));
    // 指定图表的配置项和数据
    var option = {
    {literal}
    tooltip : {
        trigger: 'axis',
        formatter: '{b}:\n{c}%',
        textStyle:{
            fontSize: 12,
        }
    },
    grid: {
        x: 45,
            y: 10,
            x2:23,
            y2:50
    },
    {/literal}
    legend: {
        data:['注册-申请通过率'],
        x: 'center',
        y: 'bottom',
    },
    {literal}
    toolbox: {
        show : true,
            feature :{
            mark :{show: true},
        }
    },
    {/literal}
    calculable : true,
        xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : {$data},
            axisLabel:{ //调整x轴的lable
                textStyle:{
                    fontSize:10,
                    color:"#a1a3a6"
                }
            }
        }
    ],
        {literal}
    yAxis : [
        {
            type : 'value',
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %',
                textStyle:{
                    fontSize:10,
                    color:"#a1a3a6"
                }
            },
            splitLine:{
                show:false
            }
        }
    ],
    {/literal}
    series : [
        {
            name:'注册-申请通过率',
            type:'line',
            stack: '总量',
            data:data['dayregsucdata'][source_id],
        {literal}
        itemStyle : {
        normal: {
            label : {
                    position: 'top',
                    formatter: '{b}\n{c}%'
            }
        }
    },
    {/literal}
    },
    ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
这样以上就是两个echarts出现的两个折线图了

收起

展开全文

echarts 前端

使用AchartEngine绘画多条折线图总结

2015-05-11 00:13:25

最近工作需要用到AchartEngine绘画多条折线图，总结一下加深自己对AchartEngine理解。

最近工作需要用到AchartEngine绘画多条折线图，总结一下加深自己对AchartEngine理解。


第一步：声明所需要的变量
private XYSeries series, series1;//存储坐标的集合

private XYMultipleSeriesDataset mDataset;//用于存储series

private XYMultipleSeriesRenderer renderer;//用于设置描绘相关的设置

private GraphicalView chart;//图表对象

第二步：初始化数据
series = new XYSeries(title);

series.add(addX, addY);


series1 = new XYSeries("状态");

series1.add(0, 0);


mDataset = new XYMultipleSeriesDataset();

mDataset.addSeries(series);

mDataset.addSeries(series1);

第三步：初始化renderer
（1）设置每个series的样式（线条颜色，粗细，点的形状等）
注意：XYSeriesRenderer个数必须和series个数相同！！！

XYSeriesRenderer r = new XYSeriesRenderer();

。。。

renderer.addSeriesRenderer(r);


（2）设置所有曲线的公共部分（坐标轴，标题，网格等）

setChartSettings(renderer, "X", "Y", 0, 100, -6000, 6000, Color.WHITE,Color.WHITE);

第四步：初始化图表对象
chart = ChartFactory.getLineChartView(context, mDataset, renderer);

第五步：将图表添加到布局中去
layout.addView(chart, new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));

第六步：动态更新数据
addX = series.getItemCount() + 1;

addY = input;

series.add(addX, addY);
chart.invalidate();// 如果在非UI主线程中，需要调用postInvalidate()，具体参考api


小细节：
renderer.setLabelsTextSize(35);//设置坐标字体后不会立即生效，需要画上至少一个点后才生效

收起

展开全文

Android用Canvas画一个折线图，并加以简单封装

千次阅读 多人点赞 2020-05-21 06:32:13

昨天晚上跟朋友聊天，聊到绘制折线，然后多画了几笔，画了个折线图。（老规矩后面有源码）先看一下效果图 view宽高设置为正方形 view宽高设置为mach_parent 先来绘制一个固定的折线图 1.先画一个xy坐标...

昨天晚上跟朋友聊天，聊到绘制折线，然后多画了几笔，画了个折线图。（老规矩后面有源码）
先看一下效果图

       
          
                    view宽高设置为正方形
                      view宽高设置为mach_parent
     
    
先来绘制一个固定的折线图
1.先画一个xy坐标轴。
   Paint daxesPaint,axispointPaint,brokenLinePaint;
        //画布宽度
        canvasWidth = canvas.getWidth();
        //画布高度
        canvasHeight = canvas.getHeight();
        widthCriterion = canvasWidth /10;    //将画布宽分为10份
        hightCriterion = canvasHeight /10;   //将画布高分为10份
        minCriterion = widthCriterion > hightCriterion ? hightCriterion /2: widthCriterion /2; //画xy轴角的依据
       
        daxesPaint=new Paint();
        daxesPaint.setColor(Color.BLACK);
        daxesPaint.setAntiAlias(true);  //去掉锯齿效果
        daxesPaint.setStrokeWidth(7.0f);//画笔宽度
        //第一个方法：画xy轴
        drawDaxes(canvas,daxesPaint);   

drawDaxes方法如下：

 private void  drawDaxes(Canvas canvas,Paint p){
       //开始y绘制坐标系
       canvas.drawLine(widthCriterion,hightCriterion,widthCriterion,hightCriterion*9,p);
       //绘制y角
       canvas.drawLine(widthCriterion-minCriterion,hightCriterion+minCriterion,widthCriterion+2,hightCriterion,p);
       canvas.drawLine(widthCriterion,hightCriterion,widthCriterion+minCriterion-2,hightCriterion+minCriterion,p);
       //开始x绘制坐标系
       canvas.drawLine(widthCriterion-4,hightCriterion*9,widthCriterion*9,hightCriterion*9,p);
       //绘制x角
       canvas.drawLine(widthCriterion*9-minCriterion,hightCriterion*9-minCriterion,widthCriterion*9,hightCriterion*9+2,p);
       canvas.drawLine(widthCriterion*9-minCriterion,hightCriterion*9+minCriterion,widthCriterion*9,hightCriterion*9-2,p);

   }


效果如下：



2.再绘制x，y轴坐标
 //开始绘制xy轴坐标
        axispointPaint=daxesPaint;
        drawAxispoint(canvas,axispointPaint);


drawAxispoint方法如下

 private void drawAxispoint(Canvas canvas,Paint p){
       textFont=widthCriterion/5*2;
       Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
       p.setTypeface( font );
       p.setTextSize(textFont);
       for (int i = 1; i <=8 ; i++) {
           String text= String.valueOf(-1+i);
           int stringWidth = (int) p.measureText(text);     //文本长度
           canvas.drawText(text, i*widthCriterion-stringWidth/2, hightCriterion*9+textFont, p);// 画文本
       }
       for (int i = 1; i <=7 ; i++) {
           String text= String.valueOf(i);
           int stringWidth = (int) p.measureText(text);
           //文本长度
           canvas.drawText(text, widthCriterion-textFont, hightCriterion*9-i*hightCriterion+stringWidth/2, p);// 画文本
       }
   }


效果图如下：



3.最后绘制折线和坐标点
 //开始绘制折线和坐标点
        brokenLinePaint=axispointPaint;
        brokenLinePaint.setStrokeWidth(5.0f);
        drawbrokenLine(canvas,brokenLinePaint);


drawbrokenLine方法如下：

 private void drawbrokenLine(Canvas canvas,Paint p){
       canvas.drawLine(widthCriterion,hightCriterion*9,widthCriterion*2,hightCriterion*2,p);
       canvas.drawLine(widthCriterion*2,hightCriterion*2,widthCriterion*3,hightCriterion*5,p);
       canvas.drawLine(widthCriterion*3,hightCriterion*5,widthCriterion*4,hightCriterion*7,p);
       canvas.drawLine(widthCriterion*4,hightCriterion*7,widthCriterion*5,hightCriterion*6,p);
       canvas.drawLine(widthCriterion*5,hightCriterion*6,widthCriterion*6,hightCriterion*7,p);
       canvas.drawLine(widthCriterion*6,hightCriterion*7,widthCriterion*7,hightCriterion*2,p);
       canvas.drawLine(widthCriterion*7,hightCriterion*2,widthCriterion*8,hightCriterion*3,p);
       //画折线上的点
       canvas.drawCircle(widthCriterion, hightCriterion*9, 10, p);
       canvas.drawCircle(widthCriterion*2,hightCriterion*2, 10, p);
       canvas.drawCircle(widthCriterion*3,hightCriterion*5, 10, p);
       canvas.drawCircle(widthCriterion*4,hightCriterion*7, 10, p);
       canvas.drawCircle(widthCriterion*5,hightCriterion*6, 10, p);
       canvas.drawCircle(widthCriterion*6,hightCriterion*7, 10, p);
       canvas.drawCircle(widthCriterion*7,hightCriterion*2, 10, p);
       canvas.drawCircle(widthCriterion*8,hightCriterion*3, 10, p);

   }


效果图如下：


固定的折线图java文件如下：
public class LineChartView extends View {

    private int minCriterion;
    private int hightCriterion;
    private int widthCriterion;
    private int canvasHeight;
    private int canvasWidth;
    private int textFont;


    public LineChartView(Context context) {
        super(context);
    }

    public LineChartView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawAxis(canvas);
    }

    //绘制
    private void drawAxis(Canvas canvas){
        Paint daxesPaint,axispointPaint,brokenLinePaint;
        //画布宽度
        canvasWidth = canvas.getWidth();
        //画布高度
        canvasHeight = canvas.getHeight();
        widthCriterion = canvasWidth /10;    //将画布宽分为10份
        hightCriterion = canvasHeight /10;   //将画布高分为10份
        minCriterion = widthCriterion > hightCriterion ? hightCriterion /2: widthCriterion /2; //画xy轴角的依据

        daxesPaint=new Paint();
        daxesPaint.setColor(Color.BLACK);
        daxesPaint.setAntiAlias(true);  //去掉锯齿效果
        daxesPaint.setStrokeWidth(7.0f);//画笔宽度
        //第一个方法：画xy轴
        drawDaxes(canvas,daxesPaint);

        //开始绘制xy轴坐标
        axispointPaint=daxesPaint;
        drawAxispoint(canvas,axispointPaint);

        //开始绘制折线和坐标点
        brokenLinePaint=axispointPaint;
        brokenLinePaint.setStrokeWidth(5.0f);
        drawbrokenLine(canvas,brokenLinePaint);
    }


   private void  drawDaxes(Canvas canvas,Paint p){
       //开始y绘制坐标系
       canvas.drawLine(widthCriterion,hightCriterion,widthCriterion,hightCriterion*9,p);
       //绘制y角
       canvas.drawLine(widthCriterion-minCriterion,hightCriterion+minCriterion,widthCriterion+2,hightCriterion,p);
       canvas.drawLine(widthCriterion,hightCriterion,widthCriterion+minCriterion-2,hightCriterion+minCriterion,p);
       //开始x绘制坐标系
       canvas.drawLine(widthCriterion-4,hightCriterion*9,widthCriterion*9,hightCriterion*9,p);
       //绘制x角
       canvas.drawLine(widthCriterion*9-minCriterion,hightCriterion*9-minCriterion,widthCriterion*9,hightCriterion*9+2,p);
       canvas.drawLine(widthCriterion*9-minCriterion,hightCriterion*9+minCriterion,widthCriterion*9,hightCriterion*9-2,p);

   }

   private void drawAxispoint(Canvas canvas,Paint p){
       textFont=widthCriterion/5*2;
       Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
       p.setTypeface( font );
       p.setTextSize(textFont);
       for (int i = 1; i <=8 ; i++) {
           String text= String.valueOf(-1+i);
           int stringWidth = (int) p.measureText(text);     //文本长度
           canvas.drawText(text, i*widthCriterion-stringWidth/2, hightCriterion*9+textFont, p);// 画文本
       }
       for (int i = 1; i <=7 ; i++) {
           String text= String.valueOf(i);
           int stringWidth = (int) p.measureText(text);
           //文本长度
           canvas.drawText(text, widthCriterion-textFont, hightCriterion*9-i*hightCriterion+stringWidth/2, p);// 画文本
       }
   }

   private void drawbrokenLine(Canvas canvas,Paint p){
       canvas.drawLine(widthCriterion,hightCriterion*9,widthCriterion*2,hightCriterion*2,p);
       canvas.drawLine(widthCriterion*2,hightCriterion*2,widthCriterion*3,hightCriterion*5,p);
       canvas.drawLine(widthCriterion*3,hightCriterion*5,widthCriterion*4,hightCriterion*7,p);
       canvas.drawLine(widthCriterion*4,hightCriterion*7,widthCriterion*5,hightCriterion*6,p);
       canvas.drawLine(widthCriterion*5,hightCriterion*6,widthCriterion*6,hightCriterion*7,p);
       canvas.drawLine(widthCriterion*6,hightCriterion*7,widthCriterion*7,hightCriterion*2,p);
       canvas.drawLine(widthCriterion*7,hightCriterion*2,widthCriterion*8,hightCriterion*3,p);
       //画折线上的点
       canvas.drawCircle(widthCriterion, hightCriterion*9, 10, p);
       canvas.drawCircle(widthCriterion*2,hightCriterion*2, 10, p);
       canvas.drawCircle(widthCriterion*3,hightCriterion*5, 10, p);
       canvas.drawCircle(widthCriterion*4,hightCriterion*7, 10, p);
       canvas.drawCircle(widthCriterion*5,hightCriterion*6, 10, p);
       canvas.drawCircle(widthCriterion*6,hightCriterion*7, 10, p);
       canvas.drawCircle(widthCriterion*7,hightCriterion*2, 10, p);
       canvas.drawCircle(widthCriterion*8,hightCriterion*3, 10, p);

   }


}


下面来简单封装一下

1.首先提供给外界输入数据的方法：

    public void setChartdate(String[] xdate, int[] ydate, float[] linedate) {
        this.xdate = xdate;    //x轴坐标
        this.ydate = ydate;    //y轴坐标
        this.linedate = linedate; //坐标点的y轴上的位置
    }


2.进行数据为空判断和越界判断

   if (xdate.length!=0&&ydate.length!=0&&linedate.length!=0&&xdate.length>=linedate.length){
            if (yMaxdata()>=lineMaxdata()){
                drawAxis(canvas);
            }

        }

其中yMaxdata(),lineMaxdata()方法作用为取ydate与linedate中的最大值

3.将所有写死的数据与传进来的数据产生联系。

    private void drawDaxes(Canvas canvas, Paint p) {
        //开始y绘制坐标系
        canvas.drawLine(widthCriterion, hightCriterion, widthCriterion, hightCriterion * (yCopies - 1), p);
        //绘制y角
        canvas.drawLine(widthCriterion - minCriterion, hightCriterion + minCriterion, widthCriterion + 2, hightCriterion, p);
        canvas.drawLine(widthCriterion, hightCriterion, widthCriterion + minCriterion - 2, hightCriterion + minCriterion, p);
        //开始x绘制坐标系
        canvas.drawLine(widthCriterion - 4, hightCriterion * (yCopies - 1), widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1), p);
        //绘制x角
        canvas.drawLine(widthCriterion * (xCopies - 1) - minCriterion, hightCriterion * (yCopies - 1) - minCriterion, widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1) + 2, p);
        canvas.drawLine(widthCriterion * (xCopies - 1) - minCriterion, hightCriterion * (yCopies - 1) + minCriterion, widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1) - 2, p);

    }

    private void drawAxispoint(Canvas canvas, Paint p) {
        textFont = widthCriterion / 5 * 2;
        Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
        p.setTypeface(font);
        p.setTextSize(textFont);
        //画x轴数据
        for (int i = 0; i < xdate.length; i++) {
            String text = xdate[i];
            int stringWidth = (int) p.measureText(text);     //文本长度
            canvas.drawText(text, (i + 1) * widthCriterion - stringWidth / 2, hightCriterion * (yCopies - 1) + textFont, p);// 画文本
        }
        for (int i = 0; i < ydate.length; i++) {
            String text = String.valueOf(ydate[i]);

            int stringWidth = (int) p.measureText(text);
            //文本长度
            if (i == 0) {
            } else {
                canvas.drawText(text, widthCriterion - textFont-stringWidth, hightCriterion * (yCopies - 1) - i * hightCriterion + stringWidth / 2, p);// 画文本

            }
        }
    }

    private void drawbrokenLine(Canvas canvas, Paint p) {
        float line=(hightCriterion * (yCopies - 1)-hightCriterion*2)/ydate[ydate.length-1];

        for (int i = 0; i <linedate.length; i++) {
            float height=hightCriterion * (yCopies-1)-line*linedate[i];
            if (i!=linedate.length-1){
                float elseheight=hightCriterion * (yCopies-1)-line*linedate[i+1];
                canvas.drawLine(widthCriterion*(i+1),height , widthCriterion * (i+2), elseheight, p);
                canvas.drawCircle(widthCriterion*(i+1), height, 10, p);
            }else{
                float endheight=hightCriterion * (yCopies-1)-line*linedate[linedate.length-1];
                canvas.drawCircle(widthCriterion*(i+1), endheight, 10, p);
            }

        }
    }

现在就可以根据给到的数据动态绘制简单折线图
接下来看效果

在Activity中找到控件后，调用控件的setChartdate()方法;

数据如下：
    private String[] xdata={"0","1","2","3","4","5","6","7","8"};
    private int[] yfata={0,10,20,30,40,50,60,70};
    private float[] linedata={5,10,6,30,5,62.5f,6,2,};

传入数据：
    linechartview.setChartdate(xdata,yfata,linedata);

效果图如下：



封装后java代码如下
public class LineChartView extends View {

    private int minCriterion;
    private int hightCriterion;
    private int widthCriterion;
    private int canvasHeight;
    private int canvasWidth;
    private int textFont;

    private String[] xdate;
    private int[] ydate;
    private float[] linedate;
    private int xCopies;
    private float yCopies;

    public void setChartdate(String[] xdate, int[] ydate, float[] linedate) {
        this.xdate = xdate;
        this.ydate = ydate;
        this.linedate = linedate;
    }


    public LineChartView(Context context) {
        super(context);
    }

    public LineChartView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (xdate.length!=0&&ydate.length!=0&&linedate.length!=0&&xdate.length>=linedate.length){
            if (yMaxdata()>=lineMaxdata()){
                drawAxis(canvas);
            }

        }

    }

    //绘制
    private void drawAxis(Canvas canvas) {
        xCopies = xdate.length + 2;
        yCopies = ydate.length + 2;
        Paint daxesPaint, axispointPaint, brokenLinePaint;
        //画布宽度
        canvasWidth = canvas.getWidth();
        //画布高度
        canvasHeight = canvas.getHeight();
        widthCriterion = canvasWidth / xCopies;
        hightCriterion = (int) (canvasHeight / yCopies);
        minCriterion = widthCriterion > hightCriterion ? hightCriterion / 2 : widthCriterion / 2;
        //开始绘制底层背景
        daxesPaint = new Paint();
        daxesPaint.setColor(Color.BLACK);
        daxesPaint.setAntiAlias(true);  //去掉锯齿效果
        daxesPaint.setStrokeWidth(7.0f);
        drawDaxes(canvas, daxesPaint);

        //开始绘制坐标点
        axispointPaint = daxesPaint;
        drawAxispoint(canvas, axispointPaint);

        //开始绘制折线和线上的点
        brokenLinePaint=axispointPaint;
        brokenLinePaint.setStrokeWidth(5.0f);
        drawbrokenLine(canvas,brokenLinePaint);
    }


    private void drawDaxes(Canvas canvas, Paint p) {
        //开始y绘制坐标系
        canvas.drawLine(widthCriterion, hightCriterion, widthCriterion, hightCriterion * (yCopies - 1), p);
        //绘制y角
        canvas.drawLine(widthCriterion - minCriterion, hightCriterion + minCriterion, widthCriterion + 2, hightCriterion, p);
        canvas.drawLine(widthCriterion, hightCriterion, widthCriterion + minCriterion - 2, hightCriterion + minCriterion, p);
        //开始x绘制坐标系
        canvas.drawLine(widthCriterion - 4, hightCriterion * (yCopies - 1), widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1), p);
        //绘制x角
        canvas.drawLine(widthCriterion * (xCopies - 1) - minCriterion, hightCriterion * (yCopies - 1) - minCriterion, widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1) + 2, p);
        canvas.drawLine(widthCriterion * (xCopies - 1) - minCriterion, hightCriterion * (yCopies - 1) + minCriterion, widthCriterion * (xCopies - 1), hightCriterion * (yCopies - 1) - 2, p);

    }

    private void drawAxispoint(Canvas canvas, Paint p) {
        textFont = widthCriterion / 5 * 2;
        Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
        p.setTypeface(font);
        p.setTextSize(textFont);
        //画x轴数据
        for (int i = 0; i < xdate.length; i++) {
            String text = xdate[i];
            int stringWidth = (int) p.measureText(text);     //文本长度
            canvas.drawText(text, (i + 1) * widthCriterion - stringWidth / 2, hightCriterion * (yCopies - 1) + textFont, p);// 画文本
        }
        for (int i = 0; i < ydate.length; i++) {
            String text = String.valueOf(ydate[i]);

            int stringWidth = (int) p.measureText(text);
            //文本长度
            if (i == 0) {
            } else {
                canvas.drawText(text, widthCriterion - textFont-stringWidth, hightCriterion * (yCopies - 1) - i * hightCriterion + stringWidth / 2, p);// 画文本

            }
        }
    }

    private void drawbrokenLine(Canvas canvas, Paint p) {
        float line=(hightCriterion * (yCopies - 1)-hightCriterion*2)/ydate[ydate.length-1];

        for (int i = 0; i <linedate.length; i++) {
            float height=hightCriterion * (yCopies-1)-line*linedate[i];
            if (i!=linedate.length-1){
                float elseheight=hightCriterion * (yCopies-1)-line*linedate[i+1];
                canvas.drawLine(widthCriterion*(i+1),height , widthCriterion * (i+2), elseheight, p);
                canvas.drawCircle(widthCriterion*(i+1), height, 10, p);
            }else{
                float endheight=hightCriterion * (yCopies-1)-line*linedate[linedate.length-1];
                canvas.drawCircle(widthCriterion*(i+1), endheight, 10, p);
            }

        }
    }
    private float yMaxdata(){
        float max = 0;
        for (int i = 0; i < ydate.length; i++) {

            if (ydate[i] > max) {
                max = ydate[i];

            }
        }
       return max;
    }

    private float lineMaxdata(){
        float max = 0;
        for (int i = 0; i < linedate.length; i++) {

            if (linedate[i] > max) {
                max = linedate[i];

            }
        }
        return max;
    }

}



核心：绘制与传入数据产生联系，建议先绘制一次固定的，再自我封装，有利于理解

觉得好的话，点个关注吧！谢谢

如有疑问，欢迎留言。

收起

展开全文

Canvas 自定义view

python 用matplotlib画一个折线图
千次阅读 2019-10-03 14:23:55
# 生成一个等差数列，从0.5 ~ 7.5之间包括 0.5，7.5有1000个元素的数组 x = np.linspace(0.5, 7.5, 1000) # 对ndarray类型x 进行矢量运算 y = np.sin(x) import matplotlib.pyplot as plt # 创建图形并设置大小 ...
收起
matplotlib python
pandas 在同一个图中画多条折线图
万次阅读 2019-06-19 17:17:46
画图 import pandas as pd import xlwt import os import matplotlib.pyplot as plt import numpy as np workbook = xlwt.Workbook() #name_list = ['V_YDJT_MHXT_DB_01_USED .xls', 'V_YDJT_HRXT_DB_01_USED.xls', ...
收起
[work] matplotlib 画多个曲线的折线图
千次阅读 2018-12-24 07:11:44
这里我利用的是matplotlib.pyplot.plot的工具来绘制折线图，这里先给出一个段代码和结果图： # -*- coding: UTF-8 -*- import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt #这里导入...
收起
【MATLAB】画多段折线图程序
千次阅读 2019-06-12 21:18:29
figure(1); T = [1 2 5 10]; P1=[0.71 0.732 0.78 0.82]; P2=[0.73 0.7823 0.8515 0.9223]; P3=[0.69 0.71 0.73 0.75]; P4=[0.65 0.69 0.71 0.69]; %plot(T,P1,'r.',T,P2,'b.',T,P3,'g.');... 效果图如下：
收起
MATLAB
求助：Python用numpy导入数据画多条折线图
2020-06-29 17:00:47
画2000-2014年GDP的折线图 然后它不是折线，是直线，可以解答一下吗，这个纵坐标要怎么办?感激不尽感激不尽！！！
收起
pyqt5,Qchart画折线图,设定多个不同刻度的Y轴,修改自定义折线图的坐标轴,改变折线图的底色
千次阅读 2019-05-23 18:09:43
Qchart设定多个不同刻度的Y轴修改自定义折线图的坐标轴改变折线图的底色,底色透明 import datetime import sys from PyQt5 import QtWidgets, QtCore from PyQt5.QtCore import Qt from PyQt5.QtGui ...
收起
pyqt5 Qchart
在同一张图中画多条折线图，并添加图例
万次阅读 2018-04-25 16:31:33
mydata 数据如下图：#在同一张图中画多条折线图并添加图例rm(list = ls(all = TRUE))mydata <- read.csv("test.csv",header = TRUE)spring_data <- mydata[which(mydata$season == "...
收起
python画折线图-python如何画折线图
千次阅读 2020-10-28 21:28:07
python画折线图利用的是matplotlib.pyplot.plot的工具来绘制折线图，这里先给出一个段代码和结果图：# -*- coding: UTF-8 -*-import numpy as npimport matplotlib as mplimport matplotlib.pyplot as plt#这里导入...
收起
Python 画多个曲线的折线图（matplotlib.pyplot.plot）
万次阅读 多人点赞 2018-01-27 15:02:59
这里我利用的是matplotlib.pyplot.plot的工具来绘制折线图，这里先给出一个段代码和结果图： # -*- coding: UTF-8 -*- import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt #这里...
收起
Android 自定义View画天气预报折线图
千次阅读 2016-12-19 13:47:58
效果图如下： ...自定义画折线图的大致思路：这个图是有多个四边形组成的（4个点连接起来就是一个四边形），两边延伸：添加四个多余的点，将左右的边距设置成负数即可。代码如下：public class WeatherChart
收起
android
python画折线图详解-python如何画折线图
2020-11-01 12:49:37
python画折线图利用的是matplotlib.pyplot.plot的工具来绘制折线图，这里先给出一个段代码和结果图：# -*- coding: UTF-8 -*-import numpy as npimport matplotlib as mplimport matplotlib.pyplot as plt#这里导入...
收起
achartengine画出动态折线图
万次阅读 热门讨论 2012-10-24 13:52:50
achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图，我也上网搜索了一下，最后还是选择使用achartengine这个现成的东西，毕竟自己再canvas一下实在是太麻烦，而且项目时间上也不允许，虽然这个画图...
收起
python画曲线图-python绘制多个曲线的折线图
千次阅读 2020-10-28 20:59:30
这篇文章利用的是matplotlib.pyplot.plot的工具来绘制折线图，这里先给出一个段代码和结果图：# -*- coding: UTF-8 -*-import numpy as npimport matplotlib as mplimport matplotlib.pyplot as plt#这里导入你自己...
收起
用canvas画两条折线图
千次阅读 2016-01-08 10:49:36
* 自定义view，用canvas画出两条曲线、X轴坐标等等 */ public class LineChartView extends View { /** * 第一条曲线的数字 */ private List<Integer> lineOneScore = new ArrayList(); ...
收起
android 图表 canvas
matplotlib画折线图
千次阅读 2018-12-16 21:16:46
matplotlib画折线图假设一天中每隔两个小时(range(2,26,2))的气温(℃)分别是[15,13,14.5,17,20,25,26,26,27,22,18,15] 代码如下： # 导入pyplot from matplotlib import pyplot as plt # 数据在X轴的位置，是一...
收起
matplotlib 数据分析
python 画柱状图折线图
千次阅读 2017-08-30 21:56:41
同一个坐标系想画多条线： x =[ 1 , 2 , 3 , 4 ] y=[ 3 , 5 , 8 , 9 ] y1=[ 1 , 8 , 3 , 2 ] plt.plot( x ,y, '*-' , color = 'b' ) plt.plot( x ,y1, '*-' , color = 'b' ) 加横纵坐标含义及标题： ...
收起
ECharts 多个折线图动态获取json数据
千次阅读 2017-11-23 22:10:50
ECharts 多个折线图动态获取json数据效果图如下：一.html部分二.js部分 function loadTwoLine() { var myChart = echarts.init(document.getElementById('TwoLineChart')); //...
收起
matlab 画折线图
万次阅读 2019-05-17 17:47:30
把开始的1改成2，结束的5改成6，整个折线图就会向右平移一个单位。 plot（x,a,'-*b',x,b,'-or'）是设置折线图中相应点和线的特征的，函数说明如下：对于‘’内的线条形状，总结了如下图：线型：线条...
收起
python画双折线图-python双折线图
千次阅读 2020-11-01 13:12:56
practice.png双y轴折线图(plot both of those plots in one plot with 2 y-axislabels)一个y轴用来展示每年选秀总人数，另一个y轴用来展示赢球贡献值的...本文内容为重复 learning python:part 2 -...
收起
python【Matlibplot绘图库】画多个曲线的折线图（Matplotlib.pyplot.plot）
千次阅读 2020-02-26 13:30:34
这里我利用的是matplotlib.pyplot.plot的工具来绘制折线图，这里先给出一个段代码和结果图： 1.代码 # -*- coding: UTF-8 -*- import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt #...
收起
echarts异步画k线图折线图
千次阅读 2017-10-26 10:42:48
echarts异步k线图折线图
收起
ECharts多个折线图动态获取json数据
万次阅读 2018-03-30 14:36:49
ECharts 多个折线图动态获取json数据效果图如下：一.html部分<p id="TwoLineChart" style="width:100%; height:400px;"></p>二.js部分<script type="...
收起
Python Plotly Dash 画多折线图
千次阅读 2019-07-07 17:39:26
import plotly.plotly as py import plotly.graph_objs as go # Create random data with numpy import numpy as np N = 500 random_x = np.linspace(0, 1...回复【算法】，获取最全面的机器学习算法网络图：
收起
python画双折线图-最适合小白学的花色玩Python折线图|画个天气预报
千次阅读 2020-11-01 13:18:51
原标题：最适合小白学的花色玩Python折线图|画个天气预报这是菜鸟学Python的第102篇原创文章前面写一篇关于数据可视化的入门开篇，简单的介绍了一下Matplotlib的使用(),今天我们进一步来探索一下Matplotlib到底能画...
收起
【python】画折线图
万次阅读 多人点赞 2019-08-12 16:52:07
画折线图至少需要2个列表：横坐标列表和纵坐标列表，两个坐标的位置一一对应。 from pylab import * mpl.rcParams['font.sans-serif'] = ['SimHei'] x_axis_data = [1, 2, 3, 4, 5] y_axis_data = [1, 2, 3, 4, 5] ...
收起

Canvas之画多个折线图

一说明:

二,代码片段(完整的代码在文章的最后)

三,Demo地址(该demo还包换圆环,柱状图等等)

php结合echarts画多个折线图

使用AchartEngine绘画多条折线图总结

Android用Canvas画一个折线图，并加以简单封装

昨天晚上跟朋友聊天，聊到绘制折线，然后多画了几笔，画了个折线图。（老规矩后面有源码）

先来绘制一个固定的折线图

固定的折线图java文件如下：

下面来简单封装一下

python 用matplotlib画一个折线图

pandas 在同一个图中画多条折线图

[work] matplotlib 画多个曲线的折线图

【MATLAB】画多段折线图程序

求助：Python用numpy导入数据画多条折线图

pyqt5,Qchart画折线图,设定多个不同刻度的Y轴,修改自定义折线图的坐标轴,改变折线图的底色

在同一张图中画多条折线图，并添加图例

python画折线图-python如何画折线图

Python 画多个曲线的折线图（matplotlib.pyplot.plot）

Android 自定义View画天气预报折线图

python画折线图详解-python如何画折线图

achartengine画出动态折线图

python画曲线图-python绘制多个曲线的折线图

用canvas画两条折线图

matplotlib画折线图

python 画柱状图折线图

ECharts 多个折线图动态获取json数据

matlab 画折线图

python画双折线图-python双折线图

python【Matlibplot绘图库】画多个曲线的折线图（Matplotlib.pyplot.plot）

echarts异步画k线图折线图

ECharts多个折线图动态获取json数据

Python Plotly Dash 画多折线图

python画双折线图-最适合小白学的花色玩Python折线图|画个天气预报

【python】画折线图

如何画多个折线图