MPAndroidChart (V2.2.5) - LineChart 相关资料和踩过的坑

一. MPAndroidChart 资料汇总

  1. 官方资料
    1.1 MPAndroidChart 源代码
    1.2 文档说明(概述)

  2. 其他资料
    2.1 MPAndroidChart 教程
    2.2 MPAndroidChart(GitHub 上优秀得图表功能库)
    2.2 MPAndroidChart 对 Y 轴上的刻度宽度的设置以及其他说明

二. MPAndroidChart - LineChart 踩过的坑

  1. 设置 X 轴显示的坐标标签范围无效的问题
    需求:X 轴显示部分坐标值,左右滑动显示剩余坐标值的效果。
    错误实现:

    lineChart.setVisibleXRangeMaximum(6); 
    lineChart.setData(lineData); 
    

    错误结果:
    MPAndroidChart (V2.2.5) - LineChart 相关资料和踩过的坑_第1张图片

    正确实现:

    lineChart.setData(lineData); 
    lineChart.setVisibleXRangeMaximum(6); //设置可见范围需要在设置数据之后才能正常显示
    
    /* 补充说明: 经过测试发现,以上设置 X 轴显示标签数会存在问题,而需要以下设置才行
     * 解释:当折线数据点少于设置的可显示标签数的时候,此时实际显示标签数为 4,标签间距也变大了。
     */
    lineChart.setVisibleXRange(6, 6);
    

    正确结果:
    MPAndroidChart (V2.2.5) - LineChart 相关资料和踩过的坑_第2张图片

  2. 设置 Y 轴的标签数并设置最大最小值范围后,有一部分标签超出控件范围而无法显示的问题
    需求:设置 Y 轴标签按照设置的最小值到最大值进行显示,并显示指定标签数
    错误实现:

       lineChart.setData(lineData); 
      
       YAxis axisLeft = lineChart.getAxisLeft(); //y轴左边标示
       axisLeft.setDrawAxisLine(false);
       axisLeft.setTextColor(Color.WHITE); //字体颜色
       axisLeft.setTextSize(15f); //字体大小
       axisLeft.setGridColor(context.getResources().getColor(R.color.grey)); //网格线颜色
       axisLeft.enableGridDashedLine(20f, 20f, 0f);    //背景用虚线表格来绘制  给整成虚线
       axisLeft.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
       
       axisLeft.setLabelCount(6, false); //显示格数
       axisLeft.setAxisMinValue(0f); //设置标签最小值
       axisLeft.setAxisMaxValue(15f); //设置标签最大值
    

    错误结果:
    MPAndroidChart (V2.2.5) - LineChart 相关资料和踩过的坑_第3张图片
    正确实现:

       YAxis axisLeft = lineChart.getAxisLeft(); //y轴左边标示
       axisLeft.setDrawAxisLine(false);
       axisLeft.setTextColor(Color.WHITE); //字体颜色
       axisLeft.setTextSize(15f); //字体大小
       axisLeft.setGridColor(context.getResources().getColor(R.color.grey)); //网格线颜色
       axisLeft.enableGridDashedLine(20f, 20f, 0f);    //背景用虚线表格来绘制  给整成虚线
       axisLeft.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
       
       axisLeft.setLabelCount(6, false); //显示格数
       axisLeft.setAxisMinValue(0f); //设置标签最小值
       axisLeft.setAxisMaxValue(15f); //设置标签最大值
    
       lineChart.setData(lineData);    //设置数据需要在设置了 Y 轴标签属性之后再调用
    

    正确结果:
    MPAndroidChart (V2.2.5) - LineChart 相关资料和踩过的坑_第4张图片

  3. 折线图的数据点,实际输入的数据是 1 位小数,而显示时却不止 1 位小数的情况
    需求:其他关联的地方显示的是 1 位小数,折线上的数据点也需要是 1 位小数,保持相同精度
    默认结果:
    MPAndroidChart (V2.2.5) - LineChart 相关资料和踩过的坑_第5张图片
    解决方案一:

       LineDataSet dataSet = new LineDataSet(yValues, "");
       //设置数据格式
       dataSet.setValueFormatter(new ValueFormatter() {
           @Override
           public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
               return "" + value;
           }
       });
       
       LineData lineData = new LineData(xValues, dataSets);
       lineChart.setData(lineData);
    

    解决方案二:

       LineDataSet dataSet = new LineDataSet(yValues, "");
    
       LineData lineData = new LineData(xValues, dataSets);
       //设置线条数据格式
       lineData.setValueFormatter(new ValueFormatter() {
           @Override
           public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
               return "" + value;
           }
       });
    
       lineChart.setData(lineData);
    

    尝试结果:
    MPAndroidChart (V2.2.5) - LineChart 相关资料和踩过的坑_第6张图片

三:iOS danielgindi/Charts (V3.1.0) - LineChart 相关资料和踩过的坑

你可能感兴趣的:(Android)