精华内容
下载资源
问答
  • 上图为一个折线图,现在需要如下效果: 1.可以设置区间,比如设定为3,它就把3~17这个区间3等分,拖动三角滑块可以改变每个区间的最低值或最高值。 2.每个区间的值相加,例如折线是销售额,滑动按钮后,可以把每个...
  • Echarts笔记——折线图(1)折线图标记区间 1.折线图类型( line )。 2.markPoint : 图表标注(最大值,最小值)。 3.markLine : 图表标线 ( 平均线 )。 4.markArea :图表标域 (标记区间 ) <!...

    Echarts笔记——折线图(1)折线图标记区间

    1.折线图类型( line )。

    2.markPoint : 图表标注(最大值,最小值)。

    3.markLine :  图表标线 ( 平均线 )。

    4.markArea :图表标域 (标记区间 )

     

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../../js/echarts.min.js"></script>
        <script src="../../js/jquery.min.js"></script>
    </head>
    <body>
    <div id="main" style="width:1200px;height:800px;"></div>
    
    <script type="text/javascript">
        line_Data2 = [3324, 2352, 4522, 1469, 6379, 5315, 2793, 4324]
        line_Data1 = [2312, 3145, 6754, 8712, 3157, 1023, 5623, 8324]
        x_Data = ['a部门', 'b部门', 'c部门', 'd部门', 'e部门', 'f部门', 'g部门', 'h部门']
    
         // 基于准备好的dom,初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main'))
        $(function (ec) {
            var option = {
                title: {
                    text: 'a公司一季度各部门销量(主标题)',
                    left: '30%',
                    textStyle: {
                        color: 'red',
                        fontSize: 30  }
                },
                xAxis: {
                    name: '部门',
                    type: 'category',
                    data: x_Data,
                    axisLabel: {        // x轴标签样式
                        textStyle: { fontSize: 20 }
                    },
                    nameTextStyle: {     // 坐标轴名字样式
                        fontSize: 20 },
                },
                yAxis: {
                    name: '销量(件)',
                    type: 'value',
                    min: 0,
                    axisLabel: {            // 坐标轴标签样式设置
                        textStyle: { fontSize: 20 },
                        formatter: '{value} 件',     // 给坐标轴标签加单位
                    },
                    nameTextStyle: { fontSize: 20 },
                },
                tooltip: { trigger: 'axis', },
                legend: { right: '5%' },
                series: [
                    {
                        name: '销量折线图',
                        type: 'line',
                        data: line_Data1,
                        smooth: true,       // 折线图线条光滑
                        markPoint: {        // 标记
                            data: [
                                {name: '最小值', type: 'min'},
                                {name: '最大值', type: 'max'}
                            ],
                            symbolSize: 80,      //标记的大小
                            label: {        // 标记单位
                                formatter: '{c}件'//单位
                            }
                        },
                        markLine:{
                          data:[
                              {name:'平均数',type:'average'}
                          ]
                        },
                        markArea: {         //  提示图表标域,常用于标记图表中某个范围的数据
                            itemStyle: {
                                color: 'rgba(255, 173, 177, 0.4)'
                            },
                            data: [
                                [{xAxis: 'c部门'}
                                    , {xAxis: 'e部门'}]
                            ]
                        },
                        areaStyle:{       // 填充样式
                          color:'#bbd3ea'
                        },
                        lineStyle:{
                            type:'dashed',  // 'dashed'虚线  , 'dotted'有斑点的;
                            color:'blue'
                        }
                    }
                ]
            };
            myChart1.setOption(option)
        })
    
    </script>
    </body>
    </html>

     

    展开全文
  • 我想在一个图表上绘制一个区域范围图表和一条线,我希望该线条在区域范围内时为黑色,而在区域范围之外时则为红色,如图片所示。我使用下面的代码绘制区域范围,但我不知道如何在区域范围之外绘制不同颜色的线条。...

    我想在一个图表上绘制一个区域范围图表和一条线,我希望该线条在区域范围内时为黑色,而在区域范围之外时则为红色,如图片所示。

    OXpp8.png

    我使用下面的代码绘制区域范围,但我不知道如何在区域范围之外绘制不同颜色的线条。

    http://jsfiddle.net/2cVGX/

    $(function () {

    var limits = [

    [64064, 14.3, 27.7],

    [64928, 14.5, 27.8],

    [65792, 15.5, 29.6],

    [66656, 16.7, 30.7],

    [67520, 16.5, 25.0],

    [68384, 17.8, 25.7],

    [69248, 13.5, 24.8],

    [70112, 10.5, 21.4],

    [70976, 09.2, 23.8],

    [71840, 11.6, 21.8],

    [72704, 10.7, 23.7],

    [73568, 11.0, 23.3],

    [74432, 11.6, 23.7],

    [75296, 11.8, 20.7],

    [76160, 12.6, 22.4],

    [77024, 13.6, 19.6],

    [77888, 11.4, 22.6],

    [78752, 13.2, 25.0],

    [79616, 14.2, 21.6],

    [80480, 13.1, 17.1],

    [81344, 12.2, 15.5],

    [82208, 12.0, 20.8],

    [83072, 12.0, 17.1],

    [83936, 12.7, 18.3],

    [84800, 12.4, 19.4],

    [85664, 12.6, 19.9],

    [86528, 11.9, 20.2],

    [87392, 11.0, 19.3],

    [88256, 10.8, 17.8],

    [89120, 11.8, 18.5],

    [89984, 10.8, 16.1]

    ],

    values = [

    [64064, 21.5],

    [64928, 22.1],

    [65792, 23.0],

    [66656, 23.8],

    [67520, 21.4],

    [68384, 21.3],

    [69248, 18.3],

    [70112, 15.4],

    [70976, 16.4],

    [71840, 17.7],

    [72704, 17.5],

    [73568, 17.6],

    [74432, 17.7],

    [75296, 16.8],

    [76160, 17.7],

    [77024, 16.3],

    [77888, 17.8],

    [78752, 18.1],

    [79616, 17.2],

    [80480, 14.4],

    [81344, 13.7],

    [82208, 17.7],

    [83072, 20.6],

    [83936, 20.3],

    [84800, 19.3],

    [85664, 15.8],

    [86528, 15.2],

    [87392, 14.8],

    [88256, 14.4],

    [89120, 15],

    [89984, 13.6]

    ],

    targets = [

    [64064, 22.5],

    [64928, 23.1],

    [65792, 21.0],

    [66656, 22.8],

    [67520, 20.4],

    [68384, 22.3],

    [69248, 18.4],

    [70112, 15.5],

    [70976, 16.4],

    [71840, 17.6],

    [72704, 18.6],

    [73568, 19.6],

    [74432, 18.7],

    [75296, 17.8],

    [76160, 17.7],

    [77024, 16.5],

    [77888, 16.8],

    [78752, 17.1],

    [79616, 17.5],

    [80480, 15.4],

    [81344, 14.7],

    [82208, 16.7],

    [83072, 15.6],

    [83936, 15.3],

    [84800, 15.5],

    [85664, 15.8],

    [86528, 15.2],

    [87392, 15.8],

    [88256, 15.4],

    [89120, 15.3],

    [89984, 14.6]

    ];

    $('#container').highcharts({

    title: {

    text: null

    },

    xAxis: {

    title: {

    text: null

    },

    type: 'linear',

    labels: {

    enabled: false

    },

    lineWidth: 0,

    tickWidth: 0

    },

    yAxis: {

    title: {

    text: null

    },

    labels: {

    enabled: false

    },

    gridLineWidth: 0

    },

    tooltip: {

    crosshairs: true,

    shared: true,

    valueSuffix: 'Virt'

    },

    legend: {

    enabled: false

    },

    series: [{

    id: 'valueLine',

    name: 'Value',

    type: 'spline',

    data: values,

    zIndex: 1,

    color: 'black',

    shadow: true,

    marker: {

    fillColor: 'black',

    lineWidth: 1,

    radius: 2,

    lineColor: "white",

    enabled: false,

    symbol: 'circle'

    }

    }, {

    id: 'targetLine',

    name: 'Target',

    type: 'spline',

    data: targets,

    linkedTo: 'valueLine',

    zIndex: 1,

    color: 'gray',

    dashStyle: 'DashDot',

    marker: {

    fillColor: 'gray',

    lineWidth: 1,

    radius: 2,

    lineColor: "white",

    enabled: false,

    symbol: 'circle'

    }

    }, {

    id: 'limitsArea',

    name: 'Limits',

    data: limits,

    type: 'areasplinerange',

    lineWidth: 1,

    lineColor: 'gray',

    linkedTo: 'valueLine',

    color: "lightGray",

    fillOpacity: 0.3,

    zIndex: 0

    }]

    });

    });

    展开全文
  • 最近在做数据分析过程中,需要探究属性和目标变量的关系,需要在绘制的折线图中给出其置信区间。 这个时候,我们可以使用plot.fill_between()函数来实现。其具体参数使用如下所示: matplotlib.pyplot.fill_...

    最近在做数据分析过程中,需要探究属性和目标变量的关系,需要在绘制的折线图中给出其置信区间。

    这个时候,我们可以使用plot.fill_between()函数来实现。其具体参数使用如下所示:

    matplotlib.pyplot.fill_between(xy1y2=0where=Noneinterpolate=Falsestep=None*data=None**kwargs)

    下面对置信期间绘制中常用,需要掌握的参数做详细解释,其余可以点击官方链接进行查看。

    x:表示横轴坐标

    y1,y2:表示纵轴坐标,画置信区间时及给出相对于同一个x,所需要的y1,y2值,在y1和y2之间的范围将被填充。其中y2默认是0。

    alpha: 表示填充颜色的透明值。范围在[0,1]。一般取0.3合适。

    color: 填充颜色。

     

     

    这是在y轴方向的填充,其还有一个姐妹函数:fill_betweenx( )是在x轴方向上做填充。参数和使用方法类似。

     

    参考资料:

    1. https://matplotlib.org/api/_as_gen/matplotlib.pyplot.fill_between.html

    2. https://zhuanlan.zhihu.com/p/97658858?utm_source=wechat_session

    展开全文
  • echarts 图表 折线图

    2019-07-21 09:40:06
    echarts 图表 折线图
  • 废话少说先上。 40~125一个颜色 125~147一个颜色 147~188一个颜色 188以上是一个颜色。自己测试随便订的范围,无实际意义。 开始撸代码、首先继承MPAndroidChart里的LineChart类 public class MyLineChart ...

    废话少说先上图。

    不同范围彩色折线图

    40~125一个颜色 125~147一个颜色 147~188一个颜色  188以上是一个颜色。自己测试随便订的范围,无实际意义。

    开始撸代码、首先继承MPAndroidChart里的LineChart类

    public class MyLineChart extends LineChart {
        public MyLineChart(Context context) {
            super(context);
        }
    
        public MyLineChart(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public MyLineChart(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
        @Override
        protected void init() {
            super.init();
            //mRenderer 渲染器 设置为自己定义的渲染器
            mRenderer = new MyLineChartRenderer(this, mAnimator, mViewPortHandler);
        }
        @Override
        public LineData getLineData() {
            return mData;
        }
    
        @Override
        protected void onDetachedFromWindow() {
            // releases the bitmap in the renderer to avoid oom error
            if (mRenderer != null && mRenderer instanceof MyLineChartRenderer) {
                ((MyLineChartRenderer) mRenderer).releaseBitmap();
            }
            super.onDetachedFromWindow();
        }
    }

    然后继承折线图的渲染器LineChartRenderer类进行重写。代码如下

    public class MyLineChartRenderer extends LineChartRenderer {
        private Paint mHighlightCirclePaint;
        private boolean isHeart; 
        float[] pos; //颜色区间的位置
        int[] colors; //区间的颜色
        int[] range; //区间范围的值  如果不需要判断高亮小圆点的值  可以删除
    
        public MyLineChartRenderer(LineDataProvider chart, ChartAnimator animator,
                                   ViewPortHandler viewPortHandler) {
            super(chart, animator, viewPortHandler);
            mChart = chart;
            mCirclePaintInner = new Paint(Paint.ANTI_ALIAS_FLAG);
            mCirclePaintInner.setStyle(Paint.Style.FILL);
            mCirclePaintInner.setColor(Color.WHITE);
            mHighlightCirclePaint = new Paint();
        }
    
        private float[] mLineBuffer = new float[4];
    
        @Override
        protected void drawLinear(Canvas c, ILineDataSet dataSet) {
    
            int entryCount = dataSet.getEntryCount();
    
            final boolean isDrawSteppedEnabled = dataSet.isDrawSteppedEnabled();
            final int pointsPerEntryPair = isDrawSteppedEnabled ? 4 : 2;
    
            Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());
    
            float phaseY = mAnimator.getPhaseY();
    
            mRenderPaint.setStyle(Paint.Style.STROKE);
    
            Canvas canvas = null;
    
            // if the data-set is dashed, draw on bitmap-canvas
            if (dataSet.isDashedLineEnabled()) {
                canvas = mBitmapCanvas;
            } else {
                canvas = c;
            }
    
            mXBounds.set(mChart, dataSet);
    
            // if drawing filled is enabled
            if (dataSet.isDrawFilledEnabled() && entryCount > 0) {
                drawLinearFill(c, dataSet, trans, mXBounds);
            }
    
            // more than 1 color
            if (dataSet.getColors().size() > 1) {
    
                if (mLineBuffer.length <= pointsPerEntryPair * 2)
                    mLineBuffer = new float[pointsPerEntryPair * 4];
    
                for (int j = mXBounds.min; j <= mXBounds.range + mXBounds.min; j++) {
    
                    Entry e = dataSet.getEntryForIndex(j);
                    if (e == null) continue;
                    if (e.getY() == 0) continue;
                    mLineBuffer[0] = e.getX();
                    mLineBuffer[1] = e.getY() * phaseY;
    
                    if (j < mXBounds.max) {
    
                        e = dataSet.getEntryForIndex(j + 1);
    
                        if (e == null) break;
                        if (e.getY() == 0) break;
                        if (isDrawSteppedEnabled) {
                            mLineBuffer[2] = e.getX();
                            mLineBuffer[3] = mLineBuffer[1];
                            mLineBuffer[4] = mLineBuffer[2];
                            mLineBuffer[5] = mLineBuffer[3];
                            mLineBuffer[6] = e.getX();
                            mLineBuffer[7] = e.getY() * phaseY;
                        } else {
                            mLineBuffer[2] = e.getX();
                            mLineBuffer[3] = e.getY() * phaseY;
                        }
    
                    } else {
                        mLineBuffer[2] = mLineBuffer[0];
                        mLineBuffer[3] = mLineBuffer[1];
                    }
    
                    trans.pointValuesToPixel(mLineBuffer);
    
                    if (!mViewPortHandler.isInBoundsRight(mLineBuffer[0]))
                        break;
    
                    // make sure the lines don't do shitty things outside
                    // bounds
                    if (!mViewPortHandler.isInBoundsLeft(mLineBuffer[2])
                            || (!mViewPortHandler.isInBoundsTop(mLineBuffer[1]) && !mViewPortHandler
                            .isInBoundsBottom(mLineBuffer[3])))
                        continue;
    
                    // get the color that is set for this line-segment
                    mRenderPaint.setColor(dataSet.getColor(j));
    
                    canvas.drawLines(mLineBuffer, 0, pointsPerEntryPair * 2, mRenderPaint);
    
                }
    
            } else { // only one color per dataset
    
                if (mLineBuffer.length < Math.max((entryCount) * pointsPerEntryPair, pointsPerEntryPair) * 2)
                    mLineBuffer = new float[Math.max((entryCount) * pointsPerEntryPair, pointsPerEntryPair) * 4];
    
                Entry e1, e2;
    
                e1 = dataSet.getEntryForIndex(mXBounds.min);
    
                if (e1 != null) {
    
                    int j = 0;
                    for (int x = mXBounds.min; x <= mXBounds.range + mXBounds.min; x++) {
    
                        e1 = dataSet.getEntryForIndex(x == 0 ? 0 : (x - 1));
                        e2 = dataSet.getEntryForIndex(x);
    
                      
                        if (e1.getY() == 0 || e2.getY() == 0) {
                            continue;
                        }
    
                      mLineBuffer[j++] = e1.getX();
                        mLineBuffer[j++] = e1.getY() * phaseY;
    
                        if (isDrawSteppedEnabled) {
                            mLineBuffer[j++] = e2.getX();
                            mLineBuffer[j++] = e1.getY() * phaseY;
                            mLineBuffer[j++] = e2.getX();
                            mLineBuffer[j++] = e1.getY() * phaseY;
                        }
    
                        mLineBuffer[j++] = e2.getX();
                        mLineBuffer[j++] = e2.getY() * phaseY;
                    }
    
                    if (j > 0) {
                        trans.pointValuesToPixel(mLineBuffer);
    
                        final int size = Math.max((mXBounds.range + 1) * pointsPerEntryPair, pointsPerEntryPair) * 2;
    
                        mRenderPaint.setColor(dataSet.getColor());
                        if (isHeart) {
                            mRenderPaint.setShader(new LinearGradient(0, mViewPortHandler.getContentRect().top,
                                    0, mViewPortHandler.getContentRect().bottom, colors, pos, Shader.TileMode.CLAMP));
                        }
                        canvas.drawLines(mLineBuffer, 0, size, mRenderPaint);
                    }
                }
            }
    
            mRenderPaint.setPathEffect(null);
        }
    
        /**
         * cache for the circle bitmaps of all datasets
         */
        private HashMap<IDataSet, DataSetImageCache> mImageCaches = new HashMap<>();
        private float[] mCirclesBuffer = new float[2];
    
        @Override
        protected void drawCircles(Canvas c) {
            mRenderPaint.setStyle(Paint.Style.FILL);
    
            float phaseY = mAnimator.getPhaseY();
    
            mCirclesBuffer[0] = 0;
            mCirclesBuffer[1] = 0;
    
            List<ILineDataSet> dataSets = mChart.getLineData().getDataSets();
    
            for (int i = 0; i < dataSets.size(); i++) {
    
                ILineDataSet dataSet = dataSets.get(i);
    
                if (!dataSet.isVisible() || !dataSet.isDrawCirclesEnabled() ||
                        dataSet.getEntryCount() == 0)
                    continue;
    
                mCirclePaintInner.setColor(dataSet.getCircleHoleColor());
    
                Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());
    
                mXBounds.set(mChart, dataSet);
    
                float circleRadius = dataSet.getCircleRadius();
                float circleHoleRadius = dataSet.getCircleHoleRadius();
                boolean drawCircleHole = dataSet.isDrawCircleHoleEnabled() &&
                        circleHoleRadius < circleRadius &&
                        circleHoleRadius > 0.f;
                boolean drawTransparentCircleHole = drawCircleHole &&
                        dataSet.getCircleHoleColor() == ColorTemplate.COLOR_NONE;
    
                DataSetImageCache imageCache;
    
                if (mImageCaches.containsKey(dataSet)) {
                    imageCache = mImageCaches.get(dataSet);
                } else {
                    imageCache = new DataSetImageCache();
                    mImageCaches.put(dataSet, imageCache);
                }
    
                boolean changeRequired = imageCache.init(dataSet);
    
                // only fill the cache with new bitmaps if a change is required
                if (changeRequired) {
                    imageCache.fill(dataSet, drawCircleHole, drawTransparentCircleHole);
                }
    
                int boundsRangeCount = mXBounds.range + mXBounds.min;
    
                for (int j = mXBounds.min; j <= boundsRangeCount; j++) {
    
                    Entry e = dataSet.getEntryForIndex(j);
    
                    if (e == null) break;
                    if (e.getY() == 0) continue;
                    mCirclesBuffer[0] = e.getX();
                    mCirclesBuffer[1] = e.getY() * phaseY;
    
                    trans.pointValuesToPixel(mCirclesBuffer);
    
                    if (!mViewPortHandler.isInBoundsRight(mCirclesBuffer[0]))
                        break;
    
                    if (!mViewPortHandler.isInBoundsLeft(mCirclesBuffer[0]) ||
                            !mViewPortHandler.isInBoundsY(mCirclesBuffer[1]))
                        continue;
    
                    Bitmap circleBitmap = imageCache.getBitmap(j);
    
                    if (circleBitmap != null) {
                        c.drawBitmap(circleBitmap, mCirclesBuffer[0] - circleRadius, mCirclesBuffer[1] - circleRadius, null);
                    }
                }
            }
        }
    
        private class DataSetImageCache {
    
            private Path mCirclePathBuffer = new Path();
    
            private Bitmap[] circleBitmaps;
    
            /**
             * Sets up the cache, returns true if a change of cache was required.
             *
             * @param set
             * @return
             */
            protected boolean init(ILineDataSet set) {
    
                int size = set.getCircleColorCount();
                boolean changeRequired = false;
    
                if (circleBitmaps == null) {
                    circleBitmaps = new Bitmap[size];
                    changeRequired = true;
                } else if (circleBitmaps.length != size) {
                    circleBitmaps = new Bitmap[size];
                    changeRequired = true;
                }
    
                return changeRequired;
            }
    
            /**
             * Fills the cache with bitmaps for the given dataset.
             *
             * @param set
             * @param drawCircleHole
             * @param drawTransparentCircleHole
             */
            protected void fill(ILineDataSet set, boolean drawCircleHole, boolean drawTransparentCircleHole) {
    
                int colorCount = set.getCircleColorCount();
                float circleRadius = set.getCircleRadius();
                float circleHoleRadius = set.getCircleHoleRadius();
    
                for (int i = 0; i < colorCount; i++) {
    
                    Bitmap.Config conf = Bitmap.Config.ARGB_4444;
                    Bitmap circleBitmap = Bitmap.createBitmap((int) (circleRadius * 2.1), (int) (circleRadius * 2.1), conf);
    
                    Canvas canvas = new Canvas(circleBitmap);
                    circleBitmaps[i] = circleBitmap;
                    mRenderPaint.setColor(set.getCircleColor(i));
    
                    if (drawTransparentCircleHole) {
                        // Begin path for circle with hole
                        mCirclePathBuffer.reset();
    
                        mCirclePathBuffer.addCircle(
                                circleRadius,
                                circleRadius,
                                circleRadius,
                                Path.Direction.CW);
    
                        // Cut hole in path
                        mCirclePathBuffer.addCircle(
                                circleRadius,
                                circleRadius,
                                circleHoleRadius,
                                Path.Direction.CCW);
    
                        // Fill in-between
                        canvas.drawPath(mCirclePathBuffer, mRenderPaint);
                    } else {
    
                        canvas.drawCircle(
                                circleRadius,
                                circleRadius,
                                circleRadius,
                                mRenderPaint);
    
                        if (drawCircleHole) {
                            canvas.drawCircle(
                                    circleRadius,
                                    circleRadius,
                                    circleHoleRadius,
                                    mCirclePaintInner);
                        }
                    }
                }
            }
    
            /**
             * Returns the cached Bitmap at the given index.
             *
             * @param index
             * @return
             */
            protected Bitmap getBitmap(int index) {
                return circleBitmaps[index % circleBitmaps.length];
            }
        }
        /***
         * 对高亮的值进行显示小圆点  如果没有此需要可删除
         * */
        @Override
        public void drawHighlighted(Canvas c, Highlight[] indices) {
            super.drawHighlighted(c, indices);
    
            float phaseY = mAnimator.getPhaseY();
            ILineDataSet lineData = mChart.getLineData().getDataSetByIndex(0);
            Transformer trans = mChart.getTransformer(lineData.getAxisDependency());
            mCirclesBuffer[0] = 0;
            mCirclesBuffer[1] = 0;
    
            for (Highlight high : indices) {
                Entry e = lineData.getEntryForXValue(high.getX(), high.getY());
                mCirclesBuffer[0] = e.getX();
                mCirclesBuffer[1] = e.getY() * phaseY;
                trans.pointValuesToPixel(mCirclesBuffer);
                mHighlightCirclePaint.setColor(lineData.getHighLightColor());
                //根据不同的区间显示小圆点的颜色
                if (isHeart) {
                    if (e.getY() >= range[0]) {
                        mHighlightCirclePaint.setColor(colors[0]);
                    } else if (e.getY() < range[0] && e.getY() >= range[1]) {
                        mHighlightCirclePaint.setColor(colors[2]);
                    } else if (e.getY() >= range[2] && e.getY() < range[1]) {
                        mHighlightCirclePaint.setColor(colors[4]);
                    } else {
                        mHighlightCirclePaint.setColor(colors[6]);
                    }
                }
                c.drawCircle(mCirclesBuffer[0], mCirclesBuffer[1], 10, mHighlightCirclePaint);
                mHighlightCirclePaint.setColor(Color.WHITE);
                c.drawCircle(mCirclesBuffer[0], mCirclesBuffer[1], 5, mHighlightCirclePaint);
            }
        }
    
        @Override
        public void drawHorizontalBezier(ILineDataSet dataSet) {
    
            float phaseY = mAnimator.getPhaseY();
    
            Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());
    
            mXBounds.set(mChart, dataSet);
    
            cubicPath.reset();
    
            if (mXBounds.range >= 1) {
    
                Entry prev = dataSet.getEntryForIndex(mXBounds.min);
                Entry cur = prev;
    
                // let the spline start
                cubicPath.moveTo(cur.getX(), cur.getY() * phaseY);
    
                for (int j = mXBounds.min + 1; j <= mXBounds.range + mXBounds.min; j++) {
    
                    prev = cur;
                    cur = dataSet.getEntryForIndex(j);
    
                    final float cpx = (prev.getX())
                            + (cur.getX() - prev.getX()) / 2.0f;
    
                    cubicPath.cubicTo(
                            cpx, prev.getY() * phaseY,
                            cpx, cur.getY() * phaseY,
                            cur.getX(), cur.getY() * phaseY);
                }
            }
    
            // if filled is enabled, close the path
            if (dataSet.isDrawFilledEnabled()) {
    
                cubicFillPath.reset();
                cubicFillPath.addPath(cubicPath);
                // create a new path, this is bad for performance
                drawCubicFill(mBitmapCanvas, dataSet, cubicFillPath, trans, mXBounds);
            }
    
            mRenderPaint.setColor(dataSet.getColor());
    
            mRenderPaint.setStyle(Paint.Style.STROKE);
    
            trans.pathValueToPixel(cubicPath);
            if (isHeart) {
                mRenderPaint.setShader(new LinearGradient(0, mViewPortHandler.getContentRect().top,
                        0, mViewPortHandler.getContentRect().bottom, colors, pos, Shader.TileMode.CLAMP));
            }
    
    
            mBitmapCanvas.drawPath(cubicPath, mRenderPaint);
    
            mRenderPaint.setPathEffect(null);
        }
        /***
         * @param isHeart true 开启分区间显示的颜色
         * @param medium 不同层级的判断条件 
         * @param colors 不同区间的颜色值,从上到下的颜色 我这里是3个值  那么分成四段 colors数组长度就为4              
         * */
        public void setHeartLine(boolean isHeart, int medium, int larger, int limit, int[] colors) {
            this.isHeart = isHeart;
            range = new int[3];
            range[0] = limit;
            range[1] = larger;
            range[2] = medium;
            float[] pos = new float[4];
            float Ymax = ((LineChart) mChart).getAxisLeft().getAxisMaximum();
            float Ymin = ((LineChart) mChart).getAxisLeft().getAxisMinimum();
            pos[0] = (Ymax - limit) / (Ymax - Ymin);
            pos[1] = (limit - larger) / (Ymax - Ymin) + pos[0];
            pos[2] = (larger - medium) / (Ymax - Ymin) + pos[1];
            pos[3] = 1f;
    
            this.pos = new float[pos.length * 2];
            this.colors = new int[colors.length * 2];
            int index = 0;
            for (int i = 0; i < pos.length; i++) {
                this.colors[index] = colors[i];
                this.colors[index + 1] = colors[i];
                if (i == 0) {
                    this.pos[index] = 0f;
                    this.pos[index + 1] = pos[i];
                } else {
                    this.pos[index] = pos[i - 1];
                    this.pos[index + 1] = pos[i];
                }
    
                index += 2;
            }
        }
    }
    

    开始使用,布局中引入

    <你的类路径.MyLineChart
            android:id="@+id/line_chart"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

     然后设置chart的XY轴样式等等。设置值之前需要设置你的区间颜色等等信息代码如下

     if (line_chart.getRenderer() instanceof MyLineChartRenderer) {
                MyLineChartRenderer renderer = (MyLineChartRenderer) line_chart.getRenderer();
    
                int medium = 125;
                int larger = 147;
                int limit = 188;
    
    
                int[] colors = new int[4];
                colors[0] = Color.parseColor("#fa7069");
                colors[1] = Color.parseColor("#faa369");
                colors[2] = Color.parseColor("#facd69");
                colors[3] = Color.parseColor("#d3d8dc");
    
                renderer.setHeartLine(true, medium,larger,limit, colors);
            }

    实现思路:

    LinearGradient线性渐变类。对Y轴不同区间占比进行计算,设置渐变色的位置pos数组。进行渐变。两个相同的颜色渐变不会有任何变化。所以设置4个颜色,实际设置进去的渐变色有8个。

    核心代码

     if (isHeart) {
                            mRenderPaint.setShader(new LinearGradient(0, mViewPortHandler.getContentRect().top,
                                    0, mViewPortHandler.getContentRect().bottom, colors, pos, Shader.TileMode.CLAMP));
                        }
     public void setHeartLine(boolean isHeart, int medium, int larger, int limit, int[] colors) {
            this.isHeart = isHeart;
            range = new int[3];
            range[0] = limit;
            range[1] = larger;
            range[2] = medium;
            float[] pos = new float[4];
            float Ymax = ((LineChart) mChart).getAxisLeft().getAxisMaximum();
            float Ymin = ((LineChart) mChart).getAxisLeft().getAxisMinimum();
            pos[0] = (Ymax - limit) / (Ymax - Ymin);
            pos[1] = (limit - larger) / (Ymax - Ymin) + pos[0];
            pos[2] = (larger - medium) / (Ymax - Ymin) + pos[1];
            pos[3] = 1f;
    
            this.pos = new float[pos.length * 2];
            this.colors = new int[colors.length * 2];
            int index = 0;
            for (int i = 0; i < pos.length; i++) {
                this.colors[index] = colors[i];
                this.colors[index + 1] = colors[i];
                if (i == 0) {
                    this.pos[index] = 0f;
                    this.pos[index + 1] = pos[i];
                } else {
                    this.pos[index] = pos[i - 1];
                    this.pos[index + 1] = pos[i];
                }
    
                index += 2;
            }
        }

    Y轴放大缩小需要禁止

    最终效果:最终效果

    三条红线是LimitLine分界线 删除即可

    展开全文
  • 如果要展现数据的趋势变化,折线图应该是不二之选,并且它更擅长于展现时间序列下的数据,根据折线斜率的不同展现变化的速率。同柱形图一样,折线图同样很大众化,每个人都见过,这本身也成了它的一个优势,就是非常...
  • 具有置信区间的交互式折线图的d3 v4端口 正在安装 如果使用NPM,则npm install d3-line-range 。 API参考 d3。 lineRange () 构造一个新的默认。 lineRange(数据) 例如: var data = [ [ 1 , 2 , 3 ] , ...
  • matplotlib——折线图

    千次阅读 2018-03-21 12:51:29
    matplotlib–折线图 折线图的概念: 该方法通常将数据绘制在折线图中,可以显示随时间变化,数据变化的趋势。 因此非常适用于显示在相等时间间隔下数据的走向变化。 折线图的做法: 示例:通过引入某商场一...
  • 折线图

    2017-11-20 00:12:00
    折线图的绘制import pandas as pd unrate = pd.read_csv('unrate.csv') unrate['DATE'] = pd.to_datetime(unrate['DATE']) # 转换成datetime的格式import matplotlib.pyplot as plt first_twelve = unrate[0:12]...
  • Python 折线图

    2020-03-19 00:14:05
    描绘一个数值变量相对于第二个数值变量的变化趋势,在折线图中,每个唯一 x 值或 x 值的分组区间仅绘制一个点(就像直方图一样)。如果一个 x 分组区间中有多个观测值,那么该点在折线图中绘制的 y 值将为该数据点在...
  • 作者:北欧森林 ...本节(44)主要内容:带95%置信区间折线图 Method 1 # Time Series with Error Bands ## In this approach, the mean of the number of orders is denoted by the white line. ## And a 95.
  • php实现动态折线图,highcharts折线图

    千次阅读 2017-07-12 16:21:28
    title: {text: '趋势图'},//折线图名字 xAxis: {categories:eval(categor)},//横坐标下面展示名称,categor是已经拼接好的。格式是['2','3','4'] yAxis: { //Y轴左边展示的名字 title: {text: name}, //隔行...
  • 目录Echarts折线图基本实现特点最大值、最小值、平均值、标注区间显示折线线条平滑效果、风格、填充效果紧挨边缘脱离0值比例堆叠折线图 Echarts折线图基本实现 特点 折线图常用来分析数据随时间的变化趋势 <!...
  • 1.先根据时间分组查出在该时间区间内有数据的时间集合; 2.如果查出的时间集合长度不大于10则遍历改时间集合,并显示所有时间点儿的值 3.如果时间集合长度大于10则采用mysql大数据的随机高效查询查出10条数据 ...
  • 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 -...
  • echarts折线图实现切断效果

    千次阅读 2020-04-15 01:12:17
    如果折线图上的数值为0会在,x轴有一段水平线,如果能将这段隐藏就达到了折线图切割的效果。 echarts中有个折线图渲染属性 visualMap, 可以利用这个属性对折线进行修饰。让被选中的区间透明就达到切割的目的了。 ...
  • 安卓 动态折线图

    千次阅读 2018-11-12 22:46:24
    安卓 动态折线图 一、简述  记--一个简单的动态折线图。数据为随机数。  例子打包:链接: https://pan.baidu.com/s/12IdD6eayEvRPeFvoymuCcg 提取码: 9vu7  二、效果   三、工程结构 四、源文件 ...
  • 折线图的使用

    2021-08-03 16:45:07
    1: 折线图的使用 1.1: Echarts 最基本的代码结构: 引入js 文件, DOM 元素, 初始化对象, 设置option 1.2: x 轴数据, 代表 1~12 月图例; 1.3: y 轴代表数据 1.4: 图表类型: 在series 设置type: line 代表折线图 ...
  • 修改python plot折线图的坐标轴刻度,这里修改为整数:代码如下:from matplotlib import pyplot as pltimport matplotlib.ticker as tickerimport numpy as npdef std_plot():overall_std = [34.369, 21.366, 16....
  • Excel折线图面积图模板-间隔填充趋势图
  • 约定: %matplotlib inline import pandas as pd import numpy as np import matplotlib.pyplot as plt ...图的用途+pandas绘图 ...折线图可以显示随时间(根据常用比例设置)而变化的连续数据,因此...
  • 原标题:多组数据制作折线图,这样的图表实用又美观,同事简单四步就完成工作中我们在对比人员数据中,我们常见的就是通个折线图来区分数据的好坏。如果数据维度较小的时候,我们可以通折线图就可以清晰的看到数据的...
  • Echarts学习记录——不等距折线图

    千次阅读 热门讨论 2017-06-12 12:01:47
    Echarts学习记录——不等距折线图 需求横坐标为一个区间,折线的每个点在区间内展示。 如横坐标是24小时的时间点,其中展示每个小时内某个时间点的数值。
  • pyplot绘制折线图 散点图 饼图

    千次阅读 2019-06-02 17:08:47
    绘制折线图 使用numpy产生[0,10]的随机数50个 import numpy as np from matplotlib import pyplot as plt x= np.arange(50) y =np.random.randint(0,10,50) fig, ax=plt.subplots() ax.plot(x,y) plt.show() 这里ax...
  • ggplot2-为折线图和条形图添加误差线

    万次阅读 多人点赞 2016-04-09 16:58:56
    采用ggplot2绘制折线图和条形图,并添加误差线.ggplot2只能处理 data.frame数据,每列作为一个变量,是一个指标.以ToothGrowth数据为例,进行处理tg ToothGrowth head(tg)## len supp dose ## 1 4.2 VC 0.5 ## 2 11.5 VC...
  • 自己撸一个折线图

    2016-12-09 14:41:05
    recyclerview实现一个折线图
  • 折线图实现

    2021-10-02 08:40:06
    一、基本实现 1、x轴数据 2、y轴数据 3、图标类型 二、常见效果 1、标注区间(通过阴影面积标注出区间) series:[{ markArea:{ data:[ [ { xAxis:'1月' }, { xAxis:'2月' }
  • Apache Echarts常用图表之折线图

    千次阅读 2021-04-21 14:21:19
    折线图的常见效果最大值\最小值 `markPoint`平均值 `markLine`标注区间 `markArea`数值显示 `label`平滑线条`smooth`线条样式`linestyle`填充风格 `areaStyle`紧挨边缘`boundaryGap`配置缩放比例 `scale`堆叠图3....
  • C#编写折线图控件

    千次阅读 2018-10-01 20:59:05
    因为我需要的折线图数据没有小于0的,所以在计算时偷懒了。只支持大于0的数据。 上图 如何插入一段漂亮的代码片 因为自学编程,代码注释与命名比较乱,请见谅。 这是新建控件的代码。需要给控件添加...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,103
精华内容 2,841
关键字:

区间折线图