MPAndroidChart 教程：修改视窗 Modifying the Viewport（九）

最新推荐文章于 2023-02-17 16:32:18 发布

付晓宇

最新推荐文章于 2023-02-17 16:32:18 发布

阅读量679

点赞数

一、概述

MPAndroidChart 图表具有多种不同的方法来修改视窗（图表上那些是可见的，以及 aim of the view）。注意，这些方法仅适用于 LineChart ,BarChart , ScatterChart 和 CandleStickChart .

请注意，修改视口的所有方法需要在为Chart 设置数据之后调用。

二、什么是可见的

setVisibleXRangeMinimum(float minXRange) : 设定x轴最大可见区域范围的大小。如果设置为17，则不可能进一步放大视图（在x轴超过17的值）。

<code class="language-java hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 上面左图不做任何处理</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 上面右图：</span>
    chart.setVisibleXRangeMinimum(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">17</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

setVisibleXRangeMaximum(float maxXRange) : 设定x轴最大可见区域范围的大小。如果设定为3，则在x轴超过3的值被视为不可见（不滑动 chart 的话）。

<code class="language-java hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">
    chart.setVisibleXRangeMaximum(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 效果如上面左图</span>

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 这时你会发现可以移动 chart 了</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 手指稍微左滑下效果图如上面右图</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

setVisibleYRangeMaximum(float maxYRange, AxisDependency axis) : 设定y轴最大可见区域范围的大小。您还需要提供要对应的轴（YAxis.AxisDependency.LEFT 或 YAxis.AxisDependency.RIGHT )

<code class="language-java hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 上面左效果图对应代码</span>
    chart.setVisibleYRangeMaximum(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>f,YAxis.AxisDependency.LEFT);

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 上面右效果图对应代码</span>
    chart.setVisibleYRangeMaximum(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">70</span>f,YAxis.AxisDependency.LEFT);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

setViewPortOffsets(float left, float top, float right, float bottom) : 设置当前视图的偏移量（实际图表窗口的两侧偏移量）。设置这个，将阻止图表自动计算它的偏移量。
使用 resetViewPortOffsets() 撤消此设置。

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    chart.setViewPortOffsets(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 图1</span>
    chart.setViewPortOffsets(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 图2</span>
    chart.setViewPortOffsets(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 图3</span>
    chart.setViewPortOffsets(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>,<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 图4</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

resetViewPortOffsets() : 撤销所有通过 setViewPortOffsets(...) 方法设置的偏移量。允许图表再次自动计算所有偏移。
setExtraOffsets(float left, float top, float right, float bottom) : 设置额外的偏移，将被添加到自动计算的偏移。这不会改变自动计算的偏移量，但增加了额外的空间给它们。

三、移动视图（它的目的）

fitScreen() : 重设所有缩放和拖动，使图表完全适合它的边界（完全缩小）。
moveViewToX(float xIndex) : 将当前视口的左侧（边）到指定的 x 值。

<code class="language-java hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    chart.setVisibleXRangeMaximum(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>);

    chart.moveViewToX(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 上面左效果图,Mar是三月</span>
    chart.moveViewToX(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 上面右效果图,Jun是六月</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

moveViewToY(float yValue, AxisDependency axis) : 使得指定的y值显示在对应y轴( 左or右 )的中间。

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    YAxis leftAxis = chart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getAxisLeft</span>()<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
    leftAxis<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setTextSize</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">18</span>f)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
    chart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.setVisibleYRangeMaximum</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">50</span>f,YAxis<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.AxisDependency</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.LEFT</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>

    chart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveViewToY</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40</span>,YAxis<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.AxisDependency</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.LEFT</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">; // 上面左效果图</span>
    chart<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveViewToY</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">40</span>,YAxis<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.AxisDependency</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.LEFT</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">; // 上面右效果图</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

moveViewTo(float xIndex, float yValue, AxisDependency axis) : 相当于setVisibleXRange(...) 和 setVisibleYRange(...) 组合使用。
centerViewTo(int xIndex, float yValue, AxisDependency axis) : 相当于 setVisibleXRange(...) 和 setVisibleYRange(...) 组合使用。

注：所有 moveViewTo(...) 方法会自动 invalidate() 刷新图表。没有必要进行进一步调用 invalidate() 。

四、变焦（编程）

zoomIn() : Zooms in by 1.4f, into the charts center.
zoomOut() : Zooms out by 0.7f, from the charts center.
zoom(float scaleX, float scaleY, float x, float y) : 根据所给的参数进行放大或缩小。参数 x 和 y 是变焦中心的坐标（单位：像素）。记住，1f = 无放缩。

五、完整示例

<code class="language-java hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    chart.setData(...); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// first set data</span>

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// now modify viewport</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// allow 20 values to be displayed at </span>
    once on the x-axis, not more
    chart.setVisibleXRangeMaximum(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>); 
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// set the left edge of the chart to x-index 10</span>
    chart.moveViewToX(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>); 

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// moveViewToX(...) also calls invalidate()</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

付晓宇

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
MPAndroidChart 教程：修改视窗 Modifying the Viewport（九）

其余文章索引： MPAndroidChart 教程：概述 MPAndroidChart 教程：开始 Getting Started（一） MPAndroidChart 教程：与图表进行手势交互 Interaction with the Chart（二） MPAndroidChart 教程：坐标轴，X轴，Y轴，Labels（三） MPAndroidChart 教程：设置数据，设置
复制链接

扫一扫