Android图表Hellocharts开源框架介绍

Hellocharts

图表组件父类 AbstractChartView

AbstractChartView属性

  • setInteractive(boolean isInteractive)：设置该图表是否可交互。如不可交互，则图表不会响应缩放、滑动、选择或点击等操作。默认值为true，可交互。
  • setZoomEnabled(boolean isZoomEnabled)：设置是否可缩放。
  • setScrollEnabled(boolean isScrollEnabled)：设置是否可滑动。
  • moveTo(float x, float y)：将视图窗口（viewport）移动至指定位置。如果可以移动，viewport将以该点为视图的中心。
  • moveToWithAnimation(float x, float y)：以动画的形式移动viewport。
  • setZoomType(ZoomType zoomType)：设置缩放类型，可选的类型包括：ZoomType.HORIZONTAL_AND_VERTICAL, ZoomType.HORIZONTAL, ZoomType.VERTICAL，默认值为HORIZONTAL_AND_VERTICAL。
  • setMaxZoom(float maxZoom)：设置最大缩放比例。默认值20。
  • setZoomLevel(float x, float y, float zoomLevel)：以坐标（x,y）为中心，自动缩放表格。注意，该方法应在设置完chartview的数据（chartdata）后再调用。
  • setZoomLevelWithAnimation(float x, float y, float zoomLevel)
  • setValueTouchEnabled(boolean isValueTouchEnabled)：设置是否允许点击图标上的值，默认为true。
  • setMaximumViewport(Viewport maxViewport)：设置最大化的viewport。注意，该方法应在设置完chartview的数据（chartdata）后再调用。
  • setCurrentViewport(Viewport targetViewport)：设置当前的viewport
  • setCurrentViewportWithAnimation(Viewport targetViewport)
  • resetViewports()：重新计算最大化和当前viewport
  • setValueSelectionEnabled(boolean isValueSelectionEnabled)：设置是否可以选中图表中的值，即当点击图表中的数据值后，会一直处于选中状态，直到用户点击其他空间。默认为false。
  • selectValue(SelectedValue selectedValue)：选中一个数据值
  • setContainerScrollEnabled(boolean isContainerScrollEnabled, ContainerScrollType containerScrollType)：设置是否允许图表在父容器中滑动。
  • startDataAnimation()：开始以动画的形式更新图表数据。
  • startDataAnimation(long duration)
  • cancelDataAnimation()
  • setDataAnimationListener(ChartAnimationListener animationListener)：设置数据动画的监听器
  • setViewportCalculationEnabled(boolean isEnabled)：设置是否允许在动画进行中或设置完表格数据后，自动计算viewport的大小。如果禁止，则需要可以手动设置。
  • setViewportAnimationListener(ChartAnimationListener animationListener)：设置viewport动画的监听器
  • setViewportChangeListener(ViewportChangeListener viewportChangeListener)：设置viewport发生变化的监听器

Viewport 属性

通过left, top, right, bottom四边确定的一个矩形区域。用来控制视图窗口的缩放

  • set(float left, float top, float right, float bottom)：设置大小。
  • left和right可以控制我们在x轴上想要显示哪部分数据，同理，top和bottom可以控制我们在y轴上要展示的数据。
  • offset(float dx, float dy)：使viewport发生偏移，dx为正数表示向右，dy为正数表示向下
  • offsetTo(float newLeft, float newTop)：使viewport偏移到指定位置，宽高不会改变
  • inset(float dx, float dy)：使viewport缩放，dx为正数会使viewport的宽边窄，dy为正数会使viewport的高度变长。即如果是正数，会放大所要显示的区域。
  • contains(float x, float y)：判断点(x,y)是否在viewport内
  • contains(float left, float top, float right, float bottom)：判断矩形是否在viewport内
  • contains(Viewport v)

图表数据父类AbstractChartData

AbstractChartData通用属性

  • setValueLabelBackgroundEnabled(boolean isValueLabelBackgroundEnabled)：设置是否显示标签的背景
  • setValueLabelBackgroundColor(int valueLabelBackgroundColor)：设置标签背景颜色
  • setValueLabelsTextColor(int valueLabelTextColor)：设置标签文字颜色，默认为白色
  • setValueLabelTextSize(int valueLabelTextSize)：设置标签文字字号，默认为12sp
  • setValueLabelTypeface(Typeface typeface)：设置标签文字字体
  • setValueLabelBackgroundAuto(boolean isValueLabelBackgrountAuto)：设置是否自动绘制标签背景
  • 不使用自动绘制背景
  • 不使用自动绘制背景，会使用valueLabelBackgroundColor所设置的颜色，默认为灰色。
  • 使用自动绘制背景
  • 使用自动绘制背景，会使用Line的颜色作为标签背景色。
  • setAxisXBottom(Axis axisX)：在图表下方设置x轴
  • setAxisYLeft(Axis axisY)：在图表左侧设置y轴
  • setAxisXTop(Axis axisX)：在图表上方设置x轴
  • setAxisYRight(Axis axisY)：在图表右侧设置y轴

Axis

  • static generateAxisFromRange(float start, float stop, float step)：生成从值start到stop按照step等差的Axis轴对象。
  • static generateAxisFromCollection(List<Float> axisValues)：根据集合axisValues生成Axis轴对象。
  • static generateAxisFromCollection(List<Float> axisValues, List<String> axisValuesLabels)：根据集合axisValues生成轴对象，axisValuesLabels作为轴坐标对应的标签。
  • setValues(List<AxisValue> values)：设置该轴的坐标信息。
  • setName(String name)：设置轴的名称，默认为空不显示。
  • setTextSize(int textSize)：设置设置轴标签和名称的字号，默认为12sp。
  • setTypeface(Typeface typeface)：设置轴标签和名字的字体。
  • setTextColor(int color)：设置轴标签和名字的颜色。
  • setAutoGenerated(boolean isAutoGenerated)：设置是否自动生成轴对象，自动适应表格的范围。
  • setHasLines(boolean hasLines)：设置是否显示坐标网格。
  • setLineColor(int lineColor)：设置网格线的颜色。
  • setInside(boolean isInside)：设置是否将轴坐标的值显示在图表内侧。
  • setInside的效果
  • setMaxLabelChars(int maxLabelChars)：设置轴标签可显示的最大字符个数，范围在0-32之间。
  • setFormatter(AxisValueFormatter formatter)：设置轴坐标格式化工具
  • setHasSeparationLine(boolean hasSeparationLine)：设置是否显示轴标签与图表之间的分割线

AxisValue属性 Axis轴坐标类

  • setValue(float value)：设置该轴坐标的值
  • setLabel(String label)：设置该轴坐标的标签

SelectedValue属性 用来保存选中的值的索引的包装类。

  • setFirstIndex(int firstIndex)：设置第一个索引，如LineChart中表示第几条线的值（lineIndex）。
  • setSecondIndex(int secondIndex)：设置第二个索引，如LineChart中表示该条线上的第几个值（valueIndex）。
  • setType(SelectedValueType type)：设置类型。
  • set(int firstIndex, int secondIndex, SelectedValueType type)

饼状

注意，饼状图与其他图表不同的是，饼状图并没有轴，也不支持缩放。为了更好的显示效果，饼状图的布局宽高应相等。

PieChartView

饼状组件，用于界面显示图表，使用如下

    <lecho.lib.hellocharts.view.PieChartView
          android:id="@+id/chart_view"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />

PieChartView属性介绍

  • setPieChartData 设置数据
  • setOnValueTouchListener 设置图表触摸事件
  • setChartRotation 设置旋转角度
  • setChartRotationEnabled 设置是否支持旋转
  • setCircleFillRatio 设置饼状图占用控件的比例

PieChartData

饼状数据 SliceValue数据模型

  • setValue(float value)：设置值
  • setColor(int color)：设置颜色
  • setSliceSpacing(int sliceSpacing)
  • setLabel(String label)：设置标签
    使用例子
 List<SliceValue> values = new ArrayList<SliceValue>();
 values.add(new SliceValue(1f, Color.RED));
 values.add(new SliceValue(10f, 0xFFEC7BA8));
 values.add(new SliceValue(20f, 0xFFE84486));
 PieChartData data = new PieChartData(values);

PieChartData属性介绍

  • PieChartData(List<SliceValue> values) 有参构造，设置占比与对应占比颜色
  • setValues(List<SliceValue> values) 设置数据模型
  • setHasLabels 设置是否有标签，默认内部标签
  • setHasLabelsOutside 设置是否启用外部标签
  • setHasLabelsOnlyForSelected 设置是否为选中时有标签
  • setHasCenterCircle 设置是否有中心圆
  • setCenterCircleScale 设置中心圆占比，最大设置1
  • setSlicesSpacing 设置分割间距
  • setCenterText1 设置中心文本1
  • setCenterText2 设置中心文本2
  • setCenterText1FontSize 设置中心文本字体1
  • setCenterText2Typeface 设置中心文本字体2

柱状

ColumnChartView

柱状组件，用于界面显示图表，使用如下

    <lecho.lib.hellocharts.view.ColumnChartView
          android:id="@+id/chart_view"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />

ColumnChartView属性

  • setColumnChartData 设置图表数据
  • setOnValueTouchListener 设置图表触摸事件

SubcolumnValue 数据模型

  • setValue 设置数据
  • setColor 设置颜色
  • setTarget 设置目标
  • setLabel 设置标签
new SubcolumnValue((i + j + 2) * 5, 0xFFEC7BA8)

Column的属性

用来表示一组柱状图。一组柱状图可以分成多个子柱状图。

  • setValues 设置柱状图数据内容
  • setFormatter 设置柱状图数据标注小数位
  • setHasLabels 设置是否有数据标注
  • setHasLabelsOnlyForSelected 设置是否点击显示标注
        //X轴数据集合
        List<String> week = new ArrayList<>();
        String[] stringArray = getResources().getStringArray(R.array.week);
        for (String weekName : stringArray) {
            week.add(weekName);
        }
        X轴与柱状数据即可关联集合
        ArrayList<AxisValue> axisValues = new ArrayList<>();
        //柱状数据组集合
        List<Column> columns = new ArrayList<>();
        //柱状数据组
        List<SubcolumnValue> values;
        for (int i = 0; i < 5; i++) {
            values = new ArrayList<>();
            for (int j = 0; j < 2; j++) {
                if (j == 0) {
                    values.add(new SubcolumnValue((i + j + 2) * 5, 0xFFEC7BA8));
                } else {
                    values.add(new SubcolumnValue((i + j + 2) * 5, Color.RED));
                }
            }
            Column column = new Column(values);
            ColumnChartValueFormatter chartValueFormatter = new SimpleColumnChartValueFormatter(2);
            column.setFormatter(chartValueFormatter);
            column.setHasLabels(true);
            column.setHasLabelsOnlyForSelected(false);
            columns.add(column);
            //给x轴坐标设置描述
            axisValues.add(new AxisValue(i).setLabel(week.get(i)));
        }

ColumnChartData属性

  • setColumns 设置数据
  • setStacked 设置同一组数据是否叠堆
  • setFillRatio 设置组与组之间的间距比
  • setBaseValue 设置基准值

折线

LineChartView

LineChartView 属性

  • setOnValueTouchListener 设置数据值点击监听
  • 实现onValueSelected(int lineIndex, int pointIndex, PointValue value)和onValueDeselected()两个监听回调方法。
  • lineIndex表示点击的“线”的索引，pointIndex表示点击的“点”的索引，value表示该“点”的值。
  • setLineChartData 设置图表数据
    例子
    <lecho.lib.hellocharts.view.LineChartView
          android:id="@+id/chart_view"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />

PreviewLineChartView 折线图的预览视图。

  • setPreviewColor 设置颜色

PointValue 属性 对“点”的封装类。

  • set 设置点的值
  • setLabel 设置点的标签信息

Line 属性 对“线”的封装类

  • setColor 设置线颜色
  • setCubic 设置平滑曲线
  • setSquare 设置是否为直角的形式显示线
  • setFilled 设置是否填充线下颜色
  • setShape 设置点样式 默认提供ValueShape.CIRCLE(圆形)、ValueShape.SQUARE (方形)、ValueShape.DIAMOND(菱形
  • setPathEffect 设置线的路径效果
  • setValues 保存线上的每个点信息
  • setHasLabelsOnlyForSelected 设置点击显示标签
  • setHasLabels 设置是否显示标签
  • setHasLines 设置是否显示线
  • setHasPoints 设置是否显示点
  • setPointRadius 设置点的半径
  • setStrokeWidth 设置线的粗细
  • setAreaTransparency 设置透明度
  • setPointColor 设置点颜色

LineChartData 折线图数据模型类

  • setLines 设置展示数据
  • setBaseValue 设置初始值
  • setAxisXBottom 设置X轴
  • setAxisYLeft 设置Y轴

Demo

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容