精华内容
下载资源
问答
  • 前言最近做项目的时候,产品说要在后台的首页放多折线图(不是多数据折线图),但我上去网上找,基本是多数据折线图。例如: 同时换关键字也没什么可参考的。 多折线图实现找不到参考的,只能自己摸索。于是尝试将呈现...

    前言

    最近做项目的时候,产品说要在后台的首页放多折线图(不是多数据折线图),但我上去网上找,基本是多数据折线图。例如:

    ff74eee211f8193eb6790c1874fda883.png

    同时换关键字也没什么可参考的。

    39824f49bf3668b4db415da407224836.png

    多折线图实现

    找不到参考的,只能自己摸索。于是尝试将呈现折线图的HTML内容复制一遍。结果是——只显示一个折线图,控制台没有报错。 开始有些思路,产生问题的原因可能是:

    一、数据没有传过来;

    二、数据绑定的问题;

    三、一二问题同时有。

    最后发现一开始的HTML结构出现问题,导致后续的数据绑定出现问题。

    highcharts插件是通过绑定id,并将数据渲染到对应id的容器中。highcharts的官方文档实例不太明显,走了一小段弯路。

    f169dcaac5e1524b5ed3f97bf21f71e2.png

    JS代码

    var vm = new Vue({

    el: '#app',

    data: {

    //表格当前页数据

    list: [],

    status: '3',

    },

    created: function () {

    //this.date=vm.date["new Date"];

    this.loadData(this.status);

    },

    methods: {

    //从服务器读取数据

    loadData(status) {

    let vm = this;

    vm.listLoading = true;

    $.getJSON('Ajax请求地址', {status: status}, function (res) {

    vm.time = [];

    vm.number = [];

    vm.time = res.time;//X轴时间

    vm.user=res.user;//Y轴用户数量

    vm.downloads=res.downloads;//Y轴下载数量

    vm.views=res.views;//Y轴浏览量

    vm.date = res.date;//标题上的时间

    vm.listLoading = false;

    var chart = Highcharts.chart('user', {

    title: {

    text: vm.date+' 用户数量'

    },

    subtitle: {

    text: '数据来源:'

    },

    yAxis: {

    title: {

    text: '用户数量'

    }

    },

    legend: {

    layout: 'vertical',

    align: 'right',

    verticalAlign: 'middle'

    },

    xAxis: {

    categories: vm.time

    },

    series: [

    {

    name: '用户数量',

    data: vm.user

    },

    ],

    responsive: {

    rules: [{

    condition: {

    maxWidth: 500

    },

    chartOptions: {

    legend: {

    layout: 'horizontal',

    align: 'center',

    verticalAlign: 'bottom'

    }

    }

    }]

    }

    });

    // Highcharts.chart('id',data);

    var chart = Highcharts.chart('download', {

    title: {

    text: vm.date+' 下载次数'

    },

    subtitle: {

    text: '数据来源:'

    },

    yAxis: {

    title: {

    text: '下载次数'

    }

    },

    legend: {

    layout: 'vertical',

    align: 'right',

    verticalAlign: 'middle'

    },

    xAxis: {

    categories: vm.time

    },

    series: [

    {

    name: '下载次数',

    data: vm.downloads

    },

    ],

    responsive: {

    rules: [{

    condition: {

    maxWidth: 500

    },

    chartOptions: {

    legend: {

    layout: 'horizontal',

    align: 'center',

    verticalAlign: 'bottom'

    }

    }

    }]

    }

    });

    });

    },

    //筛选时间类型

    sel(){

    this.loadData(this.status);

    },

    },

    })

    HTML

    效果

    aab4a4ac0c7570c6a08c54b5e2426f71.png 若想实现多数据折线图,则在series中添加数据项即可。

    series: [

    {

    name: '用户数量',

    data: vm.user

    },

    {

    name: '下载数量',

    data: vm.downloads

    },

    {

    name: '浏览量',

    data: vm.views

    },

    ],

    相关链接

    HighCharts在线演示

    HighCharts半中文API文档

    注:百度搜到的那些相关的帖子没有比较准确说到关键点上(相关文章也不多),以及官方文档的描述有点乱。个人写的这篇更倾向于演示,比较适合JS基础薄弱的开发人员。如有错误,还望各位前辈在评论区指出。

    展开全文
  • <div><p>例如:监控CPU利用率,每秒增往后加一个数据折线图向左平移</p><p>该提问来源于开源项目:antvis/G2Plot</p></div>
  • 就是比如要在折线图上固定显示10个点,刚开始数据点是不断往左边平移,当大于10个点时,第一个点会消失,第11个点补进来,依次类推,实现这种跟进式动态效果,求怎么实现这个功能;
  • 下面的那个折线图我已经做好了,可是上面的那些表示风向风速的箭头怎么添上去。折线图是用highcharts做的。另外我已经拿到了后台传来的风速和风向数据,请问highcharts怎么可以做出来![图片说明]...
  • 寻找资料时,发现要么是将多张图绘制在同一画布之上,要么是一张图绘制多条曲线,还有就是绘制双Y轴曲线图,而本人想将四张双Y轴折线图呈现在同一个画布之上,也就是使得四个两两坐标尺度不同的图片绘制在一张图之上...

    问题的提出

    寻找资料时,发现要么是将多张图绘制在同一画布之上,要么是一张图绘制多条曲线,还有就是绘制双Y轴曲线图,而本人想将四张双Y轴折线图呈现在同一个画布之上,也就是使得四个两两坐标尺度不同的图片绘制在一张图之上,这就需要结合上述方法。

    直接上图

    一张画布,四个双坐标图

    实现代码

    一句话: 将画布分为左上左下、右上右下的四跨区域,然后在每块区域中画出两个不同Y轴的折线图

    import pandas as pd
    import matplotlib.pyplot as plt
    
    rate = pd.read_csv('文件.csv', encoding="utf-8")  # 读取csv文件
    rate2_var = rate.rate2_var  ## 下面四列是读取所需的数据,自己看着来
    var13 = rate.var13
    num_var = rate.num_var
    price_var = rate.price_var
    
    
    year = [2009, 2010, 2011, 2012, 2013, 2014, 2015]
    fig = plt.figure()                     # 生成一张画布
    ax1 = fig.add_subplot(221)  #利用add_subplot将画布分成两行两列,共四个小区域,并另ax1为第一个区域,也就是左上角,222 223 224以此类推
    ax1.plot(year, rate2_var, ls='-.', label="标签", linewidth=3) # 画图
    ax1.set_ylabel('y轴坐标')  # 设置y轴坐标名
    ax1.set_xlabel('年份')   # 设置y轴坐标名
    ax1.set_title("标题1")  # 设置标题
    plt.legend(loc="best")  
    
    ax12 = ax1.twinx()  # 利用twinx函数产生一个和ax1具有相同横坐标的ax12,而Y坐标会依据数据自动生成,就此形成双Y轴坐标
    ax12.plot(year, num_var, ls="solid")
    ax12.set_ylabel('xxxx')
    ax12.set_xlabel('年份')
    
    
    ax2 = fig.add_subplot(222)  # 与上述步骤类似
    ax2.plot(year, rate2_var, ls='-.', linewidth=3)
    ax2.set_ylabel('xxxxxxx')
    ax2.set_xlabel('年份')
    ax2.set_title("xxxxxx")
    
    
    ax22 = ax2.twinx()
    ax22.plot(year, price_var, ls="dashed", label="地价变动")
    ax22.set_ylabel('xxxxxxxxxx')
    ax22.set_xlabel('年份')
    plt.legend(loc=4)
    
    ax3 = fig.add_subplot(223)
    ax3.plot(year, var13, ls=':', label="xxxxx")
    ax3.set_ylabel('xxxxxxxxxx')
    ax3.set_xlabel('年份')
    ax3.set_title("xxxxxxx")
    plt.legend(loc=8)
    
    ax32 = ax3.twinx()
    ax32.plot(year, num_var, ls="solid")
    ax32.set_ylabel('xxxxxxxxxx')
    ax32.set_xlabel('年份')
    
    
    ax4 = fig.add_subplot(224)
    ax4.plot(year, var13, ls=':')
    ax4.set_ylabel('xxxxxxxxxxx')
    ax4.set_xlabel('年份')
    ax4.set_title("xxxxxxxxxx")
    
    
    ax42 = ax4.twinx()
    ax42.plot(year, price_var, ls="dashed", label="xxxxxxx")
    ax42.set_ylabel('xxxxxxxxx')
    ax42.set_xlabel('xxxxxxxxxx')
    plt.legend(loc=4)
    
    plt.rcParams['font.sans-serif'] = ['SimHei']  # 为了正常显示标签或坐标名等中文信息
    
    plt.show()  
    
    
    展开全文
  • 如题,类似股票的K线,随着数据变多,历史数据向左移动,用highcharts或者echarts怎么实现,其他js技术也可以,求大神!!!
  • 或者是一个echar 图表 可以有两个折线图,单位不一样呢。 如果只有一个折线图,跨度太大的话,就看不出来效果了。下面是折线图的效果。 这是单个value的,还可以接受。 <p><img alt...
  • 问题一:echarts 折线图数据对应不上y轴是怎么回事?完整代码demo: 问题一:怎么设置y轴左边的数值,右侧是百分比? 解决方案 先说一下如何实现双y轴,echarts中有个控制y轴的属性叫yAxis,这个属性当我们里面...

    最近项目才开始使用 echarts 遇到了一些问题,记录下,先看下效果图(请忽略数据):
    在这里插入图片描述

    问题一:怎么设置y轴左边的数值,右侧是百分比?

    解决方案

    先说一下如何实现双y轴,echarts中有个控制y轴的属性叫yAxis,这个属性当我们里面只设置一个需求时,它可以为对象,当我们要设置很多需求时,它还可以是个数组,所以我们要设置双y轴,它就需要为数组,看代码:

    yAxis: [
    	{
    	    type: "value",
    	    name: "对话/访问",
    	    ....
    	},
    	{
    	    type: "value",
    	    name: "对话率%",
    	    ....
    	}
    ],
    

    这时候就有两个y轴了,一个为 访问/对话 另一个为 对话率,在series中我们要不同数据对应不同y轴显示,我们要通过 yAxisIndex 来控制要对应显示的y轴在yAxis数组中的下标,如:

    {
    	name: "对话率",
    	yAxisIndex:1,
    }
    

    这个数据对应的就是下标为0的次数y轴,那么我们怎么才能让概率轴以百分比数显示呢,既然是控制y轴当然得在yAxis的对应对象里操作:

    {
         type: "value",
         name: "对话率%",
         min: 0,
         max: 200,
         axisLabel: {
             show: true,
             interval: "auto",
             formatter: "{value}%"
         },
     }
    

    问题二:echarts 折线图数据对应不上y轴是怎么回事?

    解决方案

    如果上面你设置了还是不行,那么可能是 stack 的值问题,需要修改每个 stack 都不一样,就不会叠加y轴,如下:

    series: [
    	{
    	    name: "访问次数",
    	    stack: "访问次数",
    	    ...
    	},
    	{
    	    name: "对话量",
    	    stack: "对话量",
    	    ...
    	},
    	{
    	    name: "对话率",
    	    stack: "对话率",
    	    ...
    	}
    ]
    

    完整代码demo

    myChart.setOption({
        title: {
            text: "浏览-对话趋势",
            left: "center"
        },
        tooltip: {
            trigger: "axis"
        },
        legend: {
            data: ["访问次数", "对话量", "对话率"],
            bottom: "5%"
        },
        grid: {
            left: "2%",
            right: "4%",
            bottom: "15%",
            containLabel: true
        },
        toolbox: {
            feature: {
                // 去掉图片下载
                // saveAsImage: {}
            }
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "08-30",
                "08-31",
                "09-01",
                "09-02",
                "09-03",
                "09-04",
                "09-05",
            ]
        },
        yAxis: [
            {
                type: "value",
                name: "对话/访问",
                // nameLocation:'center',
                nameTextStyle: {
                    color: "#89A54E"
                },
                axisLabel: {
                    textStyle: {
                        color: "#89A54E"
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: { show: false }
            },
            {
                nameTextStyle: {
                    color: "#4572A7"
                },
                type: "value",
                name: "对话率%",
                position: "right",
                axisLine: {
                    show: false
                },
                axisTick: { show: false },
                min: 0,
                max: 200,
                axisLabel: {
                    textStyle: {
                        color: "#4572A7"
                    },
                    show: true,
                    interval: "auto",
                    formatter: "{value}%"
                },
                show: true
            }
        ],
        series: [
            {
                name: "访问次数",
                type: "line",
                stack: "访问次数",
                smooth:true,
                icon: "line",
                itemStyle: {
                    normal: {
                        color: "#88e5ff",
                        lineStyle: {
                            color: "#88e5ff"
                        }
                    }
                },
                areaStyle: { normal: { color: "#88e5ff" } }, // 添加颜色区域
                data: [0, 0, 0, 134, 0, 0, 0]
            },
            {
                name: "对话量",
                type: "line",
                stack: "对话量",
                smooth:true,
                itemStyle: {
                    normal: {
                        color: "#a8f5a1",
                        lineStyle: {
                            color: "#a8f5a1"
                        }
                    }
                },
                areaStyle: { normal: { color: "#a8f5a1" } },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: "对话率",
                yAxisIndex:1,
                type: "line",
                stack: "对话率",
                smooth:true,
                itemStyle: {
                    normal: {
                        color: "#b78ffc",
                        lineStyle: {
                            color: "#b78ffc"
                        }
                    }
                },
                areaStyle: { normal: { color: "#b78ffc" } },
                data: [50, 100, 120, 55, 23, 78, 200]
            }
        ]
    });
    
    展开全文
  • 折线图(六)绘制真正可用的折线图

    千次阅读 2015-11-26 00:43:21
    之前那几遍都是为了展示实现思路的,并不是...这个下面本人实现折线图是测试数据的图,随机点测试 package sam.android.utils.widget; import java.util.List; /** * 折线信息 */ public class LineCha

    之前那几遍都是为了展示实现思路的,并不是真正的图实现。看过的人大致都知道接下来怎么做了,只不过是测量下折线图然后设置合理的大小。


    这个下面本人实现的折线图是测试数据的图,随机点测试


    package sam.android.utils.widget;
    
    import java.util.List;
    
    /**
     * 折线信息
     */
    public class LineChartInfo
    {
        /**
         *    折线名字
         */
        private String name;
    
    
        /**
         * 折线颜色
         */
        private int color;
    
        /**
         * 折线所有的折线点
         */
        private List<LineChartPoint> points;
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public int getColor() {
            return color;
        }
    
        public void setColor(int color) {
            this.color = color;
        }
    
    
    
        public List<LineChartPoint> getPoints() {
            return points;
        }
    
        public void setPoints(List<LineChartPoint> points) {
            this.points = points;
        }
    
    }
    


    /**
     * 折线点
     */
    public class LineChartPoint {
    
        /**
         * y坐标轴的实际值
         */
        private float yValue;
    
        /**
         * x坐标轴的实际值
         */
        private float xValue;
    
        public float getxValue() {
            return xValue;
        }
    
    
    
        public void setxValue(float xValue) {
            this.xValue = xValue;
        }
    
        public float getyValue() {
            return yValue;
        }
    
        public void setyValue(float yValue) {
            this.yValue = yValue;
        }
    }



    package sam.android.utils.widget;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Rect;
    import android.util.AttributeSet;
    import android.view.View;
    
    import java.util.ArrayList;
    import java.util.List;
    
    
    /**
     * 绘制折线图详情
     */
    public class LineChartView extends View
    
    {
        /*
        **
        * x 坐标最大值的文字长度
        */
        private int maxXChartValueLen = 0;
    
        /**
         * y 坐标最大值的文字长度
         */
        private int maxYChartValueLen = 0;
    
    
        /**
         * x轴每一单位多少px, 默认为2px/单位
         */
        private float xUnit = 16;
    
    
        /**
         * y轴每一单位多少px,默认为10px/单位
         */
        private float yUnit = 16;
        /**
         * x 轴最大单位值(非x位置值,其x位置值等于maxXValue*xUnit), 默认为200个单位
         */
        private float maxXValue = 30;
    
        /**
         * y 轴最大单位值 (非y位置值,其y位置值等于maxYValue*yUnit).默认为300个单位
         */
        private float maxYValue = 45;
    
    
        /**
         * 折线图距离左边或右边多少距离,默认为100px
         */
        private float chartViewMarginX = 100;
    
    
        /**
         * 折线图距离上班边或下边多少距离, ,默认为100px
         */
        private float chartViewMarginY = 100;
    
    
        /**
         * 折线图x坐标名字
         */
        private String xName = "x";
    
    
        /**
         * 折线图y坐标名字
         */
        private String yName = "y";
    
    
        /**
         * 坐标轴字体大小,默认32px
         */
        private float coordinateValueTextSize = 32;
    
        /**
         * 坐标轴文字到坐标轴距离
         */
        private float charToCoordinateAxisDistance = 15;
    
    
        /**
         * 箭头到最大单位值的距离
         */
        private float arrowToTextDistance = 100;
    
        /**
         * 表示设置的视图最小宽度
         */
        private float configWith = 480;
    
        /**
         * 表示设置的视图最小高度
         */
        private float configHeigh = 800;
    
        private int lineNamesHeight;
    
        /**
         * y轴最大的c长度
         */
        float realYAxisLen;
    
    
        /**
         * x轴最大的长度
         */
        float realXAxisLen;
    
        /**
         * x坐标轴到底部距离
         */
        float marginXAxisDistance;
    
    
        /**
         * y坐标轴到左边距离
         */
        float marginYAxisDistance;
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);
            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    
            for(LineChartInfo lineChartInfo : lineChartInfos)
            {
                List<LineChartPoint> points = lineChartInfo.getPoints();
                for(LineChartPoint point : points)
                {
                    maxXValue = Math.max(maxXValue, point.getxValue());
                    maxYValue = Math.max(maxYValue, point.getyValue());
                }
            }
    
            if (MeasureSpec.AT_MOST == heightMode) {
                heightSize = heightSize > configHeigh ? heightSize : (int) configHeigh;
            } else if (MeasureSpec.UNSPECIFIED == heightMode) {
                heightSize = (int) configHeigh;
            }
    
            if (MeasureSpec.AT_MOST == widthMode) {
                widthSize = widthSize > configWith ? widthSize : (int) configWith;
            } else if (MeasureSpec.UNSPECIFIED == widthMode) {
                widthSize = (int) configWith;
            }
    
    
           //x轴名字 CharObj
            CharObj xNameCharObj = getCharObj(xName, coordinateValueTextSize);
    
            //y轴名字 CharObj
            CharObj yNameCharObj = getCharObj(yName, coordinateValueTextSize);
    
            // x 轴最大单位值 CharObj
            CharObj maxXValueCharObj = getCharObj(maxXValue + "", coordinateValueTextSize);
    
            // y 轴最大单位值 CharObj
            CharObj maxYValueCharObj = getCharObj(maxYValue + "", coordinateValueTextSize);
    
            //计算x坐标轴到底部距离 , 文字到坐标轴距离+ 文字高度+marginY+上方名字长度
            marginXAxisDistance = charToCoordinateAxisDistance + (xNameCharObj.heightLen > maxXValueCharObj.heightLen ? xNameCharObj.heightLen : maxXValueCharObj.heightLen) + chartViewMarginY + lineNamesHeight;
    
            //计算y坐标轴到左边距离 , 文字到坐标轴距离+ 文字宽度+marginX
            marginYAxisDistance = charToCoordinateAxisDistance + (yNameCharObj.withLen > maxYValueCharObj.withLen ? yNameCharObj.withLen : maxYValueCharObj.withLen) + chartViewMarginX;
    
            float maxYValuePX = maxYValue * yUnit; //最大y轴的单位值的实际位置
    
    
            //显示视图需要的高度
            int needHeight = (int) (configHeigh > maxYValuePX ? configHeigh : maxYValuePX ) + (int) (arrowToTextDistance+marginXAxisDistance * 2);
    
            float maxXValuePX = maxXValue * xUnit;//最大的x轴单位值的实际位置
    
            //显示视图需要的宽度
            int needWidth = (int) (configWith > maxXValuePX ? configWith : maxXValuePX ) + (int)(arrowToTextDistance+marginYAxisDistance * 2);
    
            heightSize = heightSize > needHeight ? heightSize : needHeight;
            widthSize = widthSize > needWidth ? widthSize : needWidth;
            realXAxisLen = widthSize - marginYAxisDistance * 2;
            realYAxisLen = heightSize - marginXAxisDistance * 2;
            super.setMeasuredDimension(widthSize, heightSize);
        }
    
        private float originY;
        private float originX;
        /**
         * 绘制坐标轴
         */
        private void drawAxis(Canvas canvas) {
            //计算原点y坐标
            originY = marginXAxisDistance + realYAxisLen;
            //计算原点x坐标相对手机的实际位置 = 文字到y坐标轴距离+ 文字的宽度
            originX = marginYAxisDistance;
            Paint paint = new Paint();
            paint.setStrokeWidth(5);
            paint.setTextSize(coordinateValueTextSize);
            canvas.drawLine(originX, originY, originX, marginXAxisDistance, paint);//画出y轴
            canvas.drawLine(originX, originY, originX + realXAxisLen, originY, paint);//画出x轴
            canvas.drawLine(originX, marginXAxisDistance, originX - 12, marginXAxisDistance + 12, paint);//画出y轴左半箭头
            canvas.drawLine(originX, marginXAxisDistance, originX + 12, marginXAxisDistance + 12, paint);//画出y轴右半箭头
            canvas.drawLine(originX + realXAxisLen, originY, originX + realXAxisLen - 12, originY + 12, paint);//画出x轴上半箭头
            canvas.drawLine(originX + realXAxisLen, originY, originX + realXAxisLen - 12, originY - 12, paint);//画出x轴下半箭头
    
            Rect rect1 = new Rect();
            paint.setTextSize(coordinateValueTextSize+12);
            paint.getTextBounds(xName, 0, xName.length(), rect1);
            canvas.drawText(xName, originX + realXAxisLen-rect1.width()/2, originY + charToCoordinateAxisDistance + rect1.height()*2, paint);
    
            paint.getTextBounds(yName, 0, yName.length(), rect1);
    
            canvas.drawText(yName, originX - charToCoordinateAxisDistance-rect1.width()*2, marginXAxisDistance+ rect1.height()/2, paint);
    
            Paint oPaint = new Paint();
            oPaint.setStrokeWidth(2);
    
            for (int i = (int) xUnit, j = 1; i <= realXAxisLen - arrowToTextDistance; i += xUnit, j++) {
                int o = 0; //标志物的高度
                if (0 == j % 10)
                {
                    o = 20;
                    String value = "" + j;
                    Rect rect = new Rect();
                    paint.setTextSize(coordinateValueTextSize);
                    paint.getTextBounds(value, 0, value.length(), rect);
                    canvas.drawText("" + j, originX + i-rect.width()/2, originY+charToCoordinateAxisDistance+rect.height(), paint);
                }
                else if (0 == j % 5)
                {
                    String value = "" + j;
                    Rect rect = new Rect();
                    paint.setTextSize(coordinateValueTextSize);
                    paint.getTextBounds(value, 0, value.length(), rect);
                    canvas.drawText("" + j, originX + i-rect.width()/2, originY+charToCoordinateAxisDistance+rect.height(), paint);
                    o = 15;
                }
                else
                    o = 10;
                canvas.drawLine(originX + i, originY, originX + i, originY - o, oPaint);
            }
    
            for (int i = (int) yUnit, j = 1; i <= realYAxisLen - arrowToTextDistance; i += yUnit, j++) {
                int o = 0; //标志物的高度
                if (0 == j % 10)
                {
                    String value = "" + j;
                    Rect rect = new Rect();
                    paint.setTextSize(coordinateValueTextSize);
                    paint.getTextBounds(value, 0, value.length(), rect);
                    canvas.drawText(value,originX-charToCoordinateAxisDistance-rect.width(), originY - i+rect.height()/2, paint);
                    o = 20;
                }
                else if (0 == j % 5)
                {
                    String value = "" + j;
                    Rect rect = new Rect();
                    paint.setTextSize(coordinateValueTextSize);
                    paint.getTextBounds(value, 0, value.length(), rect);
                    canvas.drawText(value,originX-charToCoordinateAxisDistance-rect.width(), originY - i+rect.height()/2 , paint);
                    o = 15;
                }
                else
                    o = 10;
                canvas.drawLine(originX, originY - i, originX + o, originY - i, oPaint);//画y标志物
    
            }
    
        }
    
    
        private List<LineChartInfo> lineChartInfos = new ArrayList<LineChartInfo>();
    
        public void addLineCharInfo(LineChartInfo info)
        {
            if(null != info)
                lineChartInfos.add(info);
        }
    
        //刷新界面
        public void update()
        {
            invalidate();
        }
    
    
        private void drawLineChartInfo(Canvas canvas)
        {
            if(lineChartInfos.isEmpty())
                return;
    
            for(LineChartInfo lineChartInfo : lineChartInfos)
            {
                List<LineChartPoint> points = lineChartInfo.getPoints();
                if(null == points || points.isEmpty())
                    continue;
                Paint linePaint = new Paint();
                linePaint.setStrokeWidth(5);
                linePaint.setColor(lineChartInfo.getColor());
                Paint pointPaint = new Paint();
                pointPaint.setStrokeWidth(10);
                for(int i = 0; i < points.size()-1; i ++)
                {
                    LineChartPoint point = points.get(i);
                    LineChartPoint point2 = points.get(i+1);
                    int x = (int) (originX+point.getxValue()*xUnit);
                    int y = (int) (originY-point.getyValue()*yUnit);
                    int x1 = (int) (originX+point2.getxValue()*xUnit);
                    int y1 = (int) (originY-point2.getyValue()*yUnit);
                    canvas.drawLine( x,y,x1,y1,linePaint);
                    canvas.drawPoint(x1, y1, pointPaint);
                }
            }
    
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            drawAxis(canvas);
            drawLineChartInfo(canvas);
        }
    
        /**
         * 获取文字会之后的CharObj
         *
         * @param value 文字
         * @param textSize 文字大小
         * @return CharObj
         */
        private CharObj getCharObj(String value, float textSize) {
            Paint paint = new Paint();
            paint.setTextSize(textSize);
            Rect rect = new Rect();
            paint.getTextBounds(value, 0, value.length(), rect);
            return new CharObj(rect.width(), rect.height());
        }
    
        /**
         * 记录绘制文字后,其文字高度,宽度。
         */
        class CharObj {
            float withLen;//测量文字的实际宽度
            float heightLen;//测量文字的实际高度
    
            CharObj(float withLen, float heightLen) {
                this.withLen = withLen;
                this.heightLen = heightLen;
            }
        }
    
        public LineChartView(Context context) {
            super(context);
        }
    
        public LineChartView(Context context, AttributeSet attrs) {
            super(context, attrs);
    
        }
    
    
    }


    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    
                <sam.android.utils.widget.LineChartView
                    android:id="@+id/lineChartView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
            </HorizontalScrollView>
        </ScrollView>
    </LinearLayout>
    
    
    如果折线点太大看会看不到,所以添加了滚动条
    
    
    
    public class MainActivity extends AppCompatActivity {
        private LineChartView lineChartView;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            lineChartView = (LineChartView) findViewById(R.id.lineChartView);
            Random random = new Random();
            int[] colors ={Color.RED, Color.BLACK, Color.BLUE, Color.CYAN, Color.GREEN};
            for(int i =  0; i <  5; i ++)
            {
                LineChartInfo info = new LineChartInfo();
                info.setColor(colors[i]);
                int x =0;
                int y =0;
                List<LineChartPoint> pointList = new ArrayList<>();
                for(int j =0 ; j < 4; j ++)
                {
                    if(0 != j)
                    {
                        x += random.nextInt(10)+1;//随机设置实际值
                        y += random.nextInt(10)+1;
                    }
                    LineChartPoint point = new LineChartPoint();
                    point.setxValue(x);
                    point.setyValue(y);
                    pointList.add(point);//添加折线点
                }
                info.setPoints(pointList);//将对应的折线点添加到对应的折线信息上
                lineChartView.addLineCharInfo(info);
            }
            lineChartView.update();//刷新界面
        }
    }

    待更新7






    展开全文
  • 在前端开发中,数据展示是必须开发的一个页面,对于数据展示的...那么,今天来学习一下echarts怎么引入到vue项目中,实现数据的图像化展示。 开发页面效果展示 可切换为表格、柱形图、折线图显示方式 制作步骤...
  • 最近写了一个关于音频分析的app,实时的音频频率信息获取到了,怎么在一个view中显示折线图,按照时间去添加...声音的频率会实时获取到,这给了数据的来源,下面具体怎么实现这个折线图。关于声音频率获取这儿就不具体
  • echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好。下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type="text/javascript" src="js/...
  • Chart1.Titles.Add("折线图报表"); Chart1.ChartAreas[0].AxisX.Title = "日期时间";//设置X轴的标题 Chart1.ChartAreas[0].AxisY.Title = "产品水平";//设置Y轴的标题 Chart1.ChartAreas[0].AxisY.Interval ...
  • 1. 我用echarts图标做了一个折线图统计,统计出来的数据有很多都显示为0,我想为了容易看一点有用的数据,想把显示为0的数据显示不见 2. 这是我数据为0的时候的样子,我想把图中红色圈圈隐藏不见或者删除,如下图!...
  • ![图片说明]... 安卓,我想做一个类似这样的折线效果,请问怎么实现,比如自定义或者用第三方(如:MPAndroidChart等) 遇到问题:移动端使用Echarts 数据量过大,加载慢,滑动卡顿等问题!
  • 在设计手机端的一个程序的时候画了一个折线图的继承了View的类,一开始显示一组数据,之后想把最开始的折线图消失,然后显示另一组数据折线图,点击的消息来自另一个类,现在就是不知道该怎么操作这个类实现折线图...
  • 最近做项目遇到了一个问题,项目组长要求在echarts的正中间位置添加一 ...在执行另外一个的charts.setoption的时候会造成echarts折线图卡顿,所以这种方法行不通, 所以请教大神有没有更好的方法,在线等。。。
  • 其实,用来分析整体的月趋势 + 每个月的分类占比,折线图+柱形图的组合图表 也可以实现。只是,从展示效果上看,饼图可能更直观些,尤其当类别数量比较少的时候。 那么,究竟用Tableau怎么做 饼图+折线的组合图表呢...
  • 现在折线的点都在一个位置始终居中,想咨询怎么把每个折线点平移到对应的柱状上。 就是一个分组中有分类 分类里有两个类别 第一个折线在第1,3,5的柱状中心位置 第二条折线在2,4,6的柱状中心位置 谢谢 ...
  • echarts除了传统的折线图、柱图,还有更多的展现形式;今天宁徽前端就带大家一一来看看;看上面echarts效果图该怎么去写呢,首先这可以横着的柱图,那就跟传统柱图的写法类似了,无非xAxis与yAxis的type对换了;在一...
  • ASP.NET中实现动态曲线的视频教程

    千次阅读 热门讨论 2012-03-19 15:23:45
    刚开始项目中大部分的折线图都是用的MSchart 微软的这个控件是够强大,但是研究了好久不知道怎么实现动态的显示曲线(如果有知道的也请给我说下 一起学习),于是乎就想到了jquery+highCharts来实现,由于我使用的...
  • 最近做的一个项目的其中一个页面有图表展示数据的需求,有柱状图、折线图和饼图,于是引入了强大的echarts. echarts的强大之处和有点这里就不多说了,详细请参照echarts官网和echarts在线demo。 但是我们的页面要...
  • ![图片说明](https://img-ask.csdn.net/upload/201703/01/1488348781_40743.png) 如图,按周统计,由于使用的是折线图框架,所以下面的列也要动态生成,请问要怎么实现
  • 在我们项目过程中,常常许多时候需要用到图形化报表,以方便查看统计数据。而highcharts则是我们做...操作之前先把完成的报表亮出来,这里主要是一个折线图: 先需要引入highcharts的核心文件: &lt;script s...
  • 写的原因很简单, 最近有不少人问,这是其一,其二是我的博客里面没有一片关于echarts的相对比较能看的教程,所以今天就写一篇,我们以折线图和饼图作为例子实现,原因是他们的数据格式相对柱状图来讲比较简单,...
  • 需求:运行监控模块,模块之间用虚线或者实线连接,且带有箭头 实现方法: 1、canvas绘制 2、echarts专业的表格软件...就是让ui出一张背景,只留下线条和背景色,其它元素的位置通过配置数据来动态渲染 ...
  • echarts实现一个页面同时显示多个图表

    万次阅读 多人点赞 2017-12-27 22:32:21
    一个JSON数据,通过echarts实现一个页面同时显示多个图表,我这是通过写一个option实现多个图表(折线图,饼图,关系图)展示,也就是说只要一个div(dom对象),实现多个不同形状的图表展示。总体采用了LayUI(表格...
  • echart之前使用过但是忘了怎么使用的,不记得当时时同步实现还是异步实现的,现在用的时候发现使用同步有点麻烦,就使用异步方法来实现了,记录一下: 在项目中使用到了3个折线、环形、柱状 下面我们一个个来...

空空如也

空空如也

1 2 3
收藏数 45
精华内容 18
关键字:

折线图数据怎么实现