13. 图例

默认情况下,所有的图表都支持图例并且会自动生成。给图表设置完数据之后,图例会被绘制出来。图例通常由多个条目组成,每个条目由标签形式/形状表示。 自动生成的图例包含的条目数取决于不同颜色的数量(跨所有DataSet对象)以及DataSet标签。图例的标签取决于为图表中使用的DataSet对象设置的标签。如果没有指定DataSet对象的标签,图表将自动生成。

为了自定义Legend,我们可以通过如下方式从图表中拿到Legend对象:

Legend legend = chart.getLegend();

13.1 控制Legend是否被绘制

方法 使用
setEnabled(boolean enabled) 设置图例禁用或者启用。如果设置为false,图例将不会被绘制出来

13.2 样式/修改图例

方法 使用
setTextColor(int color) 设置图例标签的文本颜色
setTextSize(float size) 设置图例标签的字体大小(dp)
setTypeface(Typeface tf) 设置图例标签的字体

13.3 换行/避免裁剪

方法 使用
setWordWrapEnabled(boolean enabled) 如果设置为true,如果图例标签过长,将会另起一行来展示超出图表范围的内容,而不是截断它。请注意,启动后会降低性能并且这个只对处理图表下的图例标签有效
setMaxSizePercent(float maxSize) 设置最大图例的百分比(相对整个图表大小)。默认为0.95f (95%)

13.4 自定义图例

方法 使用
setPosition(LegendPosition pos) 设置图例的显示位置。可选项:RIGHT_OF_CHART, RIGHT_OF_CHART_CENTER, RIGHT_OF_CHART_INSIDE, BELOW_CHART_LEFT, BELOW_CHART_RIGHT, BELOW_CHART_CENTER or PIECHART_CENTER (只有饼图使用这个)等等
setForm(LegendForm shape) 设置LegendForm。这是在带有图例条目表示的DataSet的颜色的图例标签旁边绘制的形状。可选项:SQUARE,CIRCLE、LINE。
setFormSize(float size) 设置legend-forms的大小(dp)
setXEntrySpace(float space) 设置横轴上的图例项之间的空间
setYEntrySpace(float space) 设置垂直轴上的图例条目之间的空间
setFormToTextSpace(float space) 设置图例标签和相应图例之间的空格
setWordWrapEnabled(boolean enabled) 设置 Legend 是否自动换行? 目前仅支持BelowChartLeft,BelowChartRight,BelowChartCenter.

13.5 设置自定义标签&颜色

方法 使用
setCustom(int[] colors, String[] labels) 设置自定义图例标签和颜色数组,颜色数量和标签数量相同且一一对应。这个方法将使默认的图例计算功能失效。调用resetCustom()来重新打开自动计算图例的功能(然后调用notifyDataSetChanged()来执行重新计算)
resetCustom() 调用这个方法之后自定义图例标签功能将会失效。标签将会被自动计算(调用notifyDataSetChanged()之后)
setExtra(int[] colors, String[] labels) 设置颜色数组和标签数据,颜色和标签一一对应,这些标签将会接在自动计算得到的标签之后(如果图例已经被计算出来, 我们需要调用notifyDataSetChanged()来让我们的修改生效)

13.6 示例

 Legend l = chart.getLegend();
    l.setFormSize(10f); // set the size of the legend forms/shapes
    l.setForm(LegendForm.CIRCLE); // set what type of form/shape should be used
    l.setPosition(LegendPosition.BELOW_CHART_LEFT);
    l.setTypeface(...);
    l.setTextSize(12f);
    l.setTextColor(Color.BLACK);
    l.setXEntrySpace(5f); // set the space between the legend entries on the x-axis
    l.setYEntrySpace(5f); // set the space between the legend entries on the y-axis

    // set custom labels and colors
    l.setCustom(ColorTemplate.VORDIPLOM_COLORS, new String[] { "Set1", "Set2", "Set3", "Set4", "Set5" });

    // and many more...

14. 动态 & 实时数据

从版本v1.6.3开始支持,持续改进中。

为了实现动态增删图表中的数据,开源库提供了大量的方法,方便我们实现图表中DataSet 数据条目的增加和删除。

14.1 动态添加/删除数据的可能性

DataSet类(和它的所有子类): |方法|使用| |---------|------------| |addEntry(Entry e)|把指定Entry添加到DataSet|

ChartData类(和它的所有子类) |方法|使用| |---------|------------| |addEntry(Entry e, int dataSetIndex)|把指定Entry添加到DataSet的指定索引位置| |addDataSet(DataSet d)|把指定DataSet添加到ChartData中|

除此之外,还存在动态移除数据的方法,具体如下:

DateSet类(和它的所有子类) |方法|使用| |---------|------------| |public boolean removeFirst()|移除第一个Entry(索引为0)。成功返回true,失败返回false| |public boolean removeLast()|移除最后一个Entry(索引为size-1)。成功返回true,失败返回false| |public boolean removeEntry(Entry e)|移除指定Entry。成功返回true| |public boolean removeEntry(int xIndex)|移除指定索引的Entry。成功返回true|

ChartData类(和它的所有子类) |方法|使用| |---------|------------| |public boolean removeEntry(Entry e, int dataSetIndex)|移除指定索引位置DataSet中的给定Entry对象。成功则返回true| |public boolean removeEntry(int xIndex, int dataSetIndex)|移除指定索引位置DataSet中的给定xIndex索引对应的Entry对象。成功则返回true| |public boolean removeDataSet(DataSet d)|从ChartData中移除指定DataSet。成功则返回true| |public boolean removeDataSet(int index)|从ChartData中移除指定索引位置对应的DataSet。成功则返回true|


14.2 注意

在动态增加或者删除数据之后,记得调用notifyDataSetChanged() ,然后调用invalidate()来执行刷新操作。

 // EXAMPLE 1
 // add entries to the "data" object
 exampleData.addEntry(...);
 chart.notifyDataSetChanged(); // let the chart know it's data changed
 chart.invalidate(); // refresh

 // EXAMPLE 2
 // add entries to "dataSet" object
 dataSet.addEntry(...);
 exampleData.notifyDataChanged(); // let the data know a dataSet changed
 chart.notifyDataSetChanged(); // let the chart know it's data changed
 chart.invalidate(); // refresh

注意:像moveViewTo(...)这样的方法,将会自动调用invalidate()。


14.3 动态数据示例

有关如何实现动态数据添加/删除的示例,请参考示例应用程序和其中的如下Activity:


15. 修改视窗

本库提供了各种方法来修改视窗(图表的可见部分)。注意,这些修改视窗的方法仅适用于LineChart, BarChart, ScatterChart和CandleStickChart。 下面提到的方法都是Chart类提供的方法。修改视窗的另一种方法是通过ViewPortHandler直接访问它(没有图表提供的中间安全性)。这仅适用于熟悉API的高级用户。

请注意,只有在设置数据之后才能调用上面这些修改视窗的方法

15.1 限制可见范围

方法 使用
setVisibleXRangeMaximum(float maxXRange) 设置在X轴上一次性最大可见范围。如果这个值设置为10,则X轴取值超过10之外的图表在不滚动的情况是无法被看到的
setVisibleXRangeMinimum(float minXRange) 设置在X轴上一次性能看到的最小范围,如果这个值设置成10,则不管你怎么放大,X轴的取值范围都不会小于10
setVisibleYRangeMaximum(float maxYRange, AxisDependency axis) 设置Y轴上一次性最大可见范围。通过AxisDependency明确对应的Y轴
setViewPortOffsets(float left, float top, float right, float bottom) 设置当前视窗的自定义偏移量(实际图表窗口侧面的偏移量),设置这个值将阻止图表自动计算其偏移量。使用resetViewPortOffsets()方法来恢复自动计算偏移量的功能。注意,如果你不知道这个是干什么的,请先搞清楚再使用
resetViewPortOffsets() 重置所有setViewPortOffsets(...)设置的偏移量。允许图表自动计算所有偏移量
setExtraOffsets(float left, float top, float right, float bottom) 在自动计算的偏移量的基础上增加额外的偏移量。这个方法不会改变自动计算的偏移量结果,只是在其基础上追加

15.2 移动视图

方法 使用
fitScreen() 重设所有缩放和拖动,使图表完全适合它的边界(完全缩小)
moveViewToX(float xValue) 将当前视窗的左侧(边)到指定的 x 值
moveViewToY(float yValue, AxisDependency axis) 使得指定的y值显示在对应y轴( 左or右 )的中间
moveViewTo(float xValue, float yValue, AxisDependency axis) 将当前视窗的左侧移动到x轴上的指定x值,并将视窗居中到所提供的y轴上的指定y值,相当于setVisibleXRange(...) 和 setVisibleYRange(...) 组合使用
centerViewTo(float xValue, float yValue, AxisDependency axis) 将使当前视窗的中心移动到指定的x值和y值相当于 setVisibleXRange(...) 和 setVisibleYRange(...) 组合使用

15.3 移动视图动画

方法 使用
moveViewToAnimated(float xValue, float yValue, AxisDependency axis, long duration) 和上面moveViewTo结果一样,只是这个过程有动画效果
centerViewToAnimated(float xValue, float yValue, AxisDependency axis, long duration) 和上面centerViewTo结果一样,只是这个过程有动画效果

15.4 缩放

方法 使用
zoomIn() 以图表中心为中心点,1.4倍步幅放大
zoomOut() 以图表中心为中心点,0.7倍步幅缩小
zoom(float scaleX, float scaleY, float x, float y) 根据所给的参数进行放大或缩小。 参数 x 和 y 是变焦中心的坐标(单位:像素)。 记住,1f = 无放缩 。
zoomAndCenterAnimated(float scaleX, float scaleY, float xValue, float yValue, AxisDependency axis, long duration) 按照给定的缩放因子进行缩放,并将视图中心移动到指定位置(带动画)

15.5 完整示例

chart.setData(...); // first set data

// now modify viewport
chart.setVisibleXRangeMaximum(20); // allow 20 values to be displayed at once on the x-axis, not more
chart.moveViewToX(10); // set the left edge of the chart to x-index 10
// moveViewToX(...) also calls invalidate()

results matching ""

    No results matching ""