Android图表Hellocharts开源框架介绍

丿末兮

已于 2023-05-17 11:38:50 修改

阅读量687

点赞数 1

分类专栏： Android 文章标签： android Android Powered by 金山文档

于 2023-03-16 17:02:34 首次发布

本文链接：https://blog.csdn.net/duanchuanzhi/article/details/129592066

版权

Android 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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" />