精华内容
下载资源
问答
  • 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还包换圆环,柱状图等等)

    展开全文
  • 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出现的两个折线图了

    展开全文
  • 最近工作需要用到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;
        }
    
    }
    
    

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

    觉得好的话,点个关注吧!谢谢
    如有疑问,欢迎留言。

    展开全文
  • 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 # 创建图形并设置大小 ...
  • 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.');... 效果如下:
  • 2000-2014年GDP的折线图 然后它不是折线,是直线,可以解答一下吗,这纵坐标要怎么办?感激不尽感激不尽 ​!!!
  • Qchart设定多个不同刻度的Y轴 修改自定义折线图的坐标轴 改变折线图的底色,底色透明 import datetime import sys from PyQt5 import QtWidgets, QtCore from PyQt5.QtCore import Qt from PyQt5.QtGui ...
  • mydata 数据如下图:#在同一张图中画多折线图并添加图例rm(list = ls(all = TRUE))mydata &lt;- read.csv("test.csv",header = TRUE)spring_data &lt;- 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
  • 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一下实在是太麻烦,而且项目时间上也不允许,虽然这画图...
  • 这篇文章利用的是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(); ...
  • 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轴的位置,是一...
  • 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 -...
  •  这里我利用的是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部分&lt;p id="TwoLineChart" style="width:100%; height:400px;"&gt;&lt;/p&gt;二.js部分&lt;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的第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] ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,423
精华内容 8,969
关键字:

如何画多个折线图