我的Andr​​oid AChartEngine已经工作,但如何让它好看吗?我的、让它、好看、工作

2023-09-05 07:07:24 作者:起赱過菂ㄖ孓

我猜冠军赠送了我大部分的问题,但让我们的细节,并给一点背景知识:

I guess the title gives away most of my questions, but let's detail and give a bit of background:

我有一个Android应用程序主要集中在TimeCharts将展示一些不同的实时数据片。所以,我已经有,抓住数据,分析它,并添加值单身时间序列数据源进行通信的服务。当用户浏览进出片段的片段,只是添加了正确的时间序列,并不断给你打电话 mChartView.repaint(); 每500毫秒

I have an Android app focused mainly for tablets that will be displaying a few different real-time data in TimeCharts. So I already have a service to communicate with the data source that grabs the data, parse it and add the values to singletons TimeSeries. When the user navigates in and out of fragments the fragment simply adds the correct TimeSeries and keeps calling mChartView.repaint(); every 500ms

所有这一切工作正常,工作很好地跨标签,旋转,通知等。

All that is operational and working nicely across tabs, rotation, notification, etc.

由于它是一个平板电脑应用程序,我想实现两件事情:1)最大可视面积; 2)使它看起来不错。

Because it's a tablet app I want to achieve two things: 1) maximize viewing area; 2) make it look good.

1)我已经删除了变焦按钮(出于某种原因,如果我尝试将其添加它给了我NullException)与 mRenderer.setZoomButtonsVisible(假); ,但仍然有一个巨大的底部边缘服用大量的屏幕空间。我尝试设置一个负边界,和它的作品,但唱片公司不同意这种边境移动,我结束了与X轴穿越而过的标签,甚至将它们传递。 我如何可以将标签下来的边界,或者把它们放在图的顶部?

1) I already removed the zoom buttons (for some reason if I try to add them it gives me NullException) with mRenderer.setZoomButtonsVisible(false); but there's still a huge bottom margin taking a lot of screen space. I tried setting a negative border, and it works, but the labels don't move with this border and I end up with the X axis crossing over the labels or even passing them. How can I move the labels down with the border, or maybe put them on the top of the graph?

2) 一)应用程序的用户可配置为使用Holo_Dark或Holo_light。所以我使用的渲染透明背景(见下面的代码段),以显示漂亮的背景底纹全息一样。如何改变坐标轴文本的颜色?我发现 mRenderer.setAxesColor(彩色)但只改线,而不是文字。

2) a) the app is user configurable to use either Holo_Dark or Holo_light. So I'm using a transparent background on the renderer (see snippet below) to show that nice background shading that holo does. How to a change the axis text color? I found the mRenderer.setAxesColor(color) but it only change the line, not the text.

    int color = Color.argb(0, 255, 255, 255); // Transparent colour
    mRenderer.setBackgroundColor(color);
    mRenderer.setMarginsColor(color);

二)Y轴是穿越在它的标签上面,我怎么能抵消他们位左移,使文本阅读? (这不是与 setMargins()

C)当用户缩放和平移图表周围,图表停止更新/重新缩放屏幕,用户在最新的值必须保持平移看到最新的值。我加在动作条一个重置缩放按钮,但我不能使它发挥作用。会是什么code键使该值将再次更新。

c) when the user zoom and pan around the chart, the chart stops updating/re-zooming the latest values on the screen and the user have to keep panning to see the latest values. I added a 'Reset Zoom' button on the ActionBar, but I can't make it work. What would be the code to make the values update again.

d)如我TimeSeires有一系列10分钟的(每秒2个值),我如何才能只显示最后1分钟(例如),如果用户想要的previous值,他就可以出锅了? (和C上的使用按钮)重新启动)

d) if my TimeSeires have a range of 10min (2 values per second) how can I make it only show the last 1min (for example) and if the user want's previous values he can pan back? (and the use button on c) re-start)

在我呈现的那一刻是设置为:

at the moment my rendered is setup as:

    int color = Color.argb(0, 255, 255, 255); // Transparent colour
    mRenderer.setBackgroundColor(color);
    mRenderer.setMarginsColor(color);
    mRenderer.setAxisTitleTextSize(16); // 16
    mRenderer.setChartTitleTextSize(20); // 20
    mRenderer.setLabelsTextSize(15); // 15
    mRenderer.setLegendTextSize(15); // 15
    mRenderer.setPointSize(0); // 10
    mRenderer.setMargins(new int[] { 20, 30, 15, 0 });      
    mRenderer.setZoomButtonsVisible(false);
    mRenderer.setShowAxes(true);
    mRenderer.setShowLegend(true);
    mRenderer.setShowGridX(true);
    mRenderer.setShowLabels(true);

和每个渲染添加到多个渲染器是这样:

and each rendered added to the Multiple renderer goes like:

    renderer.setDisplayChartValues(false);
    mRenderer.addSeriesRenderer(renderer);

非常感谢所有帮助!

thanks a lot for all help!

编辑只是包括我的最后code给别人看的:

我已经结束了完全抛弃了传奇和实现我自己的传奇浮上面的图表,所以布局是一个ChartView和TableLayout一个的FrameLayout。

I've ended up ditching the legend completely and implementing my own legend floating above the chart, so the layout is a FrameLayout with a ChartView and a TableLayout.

我实现了由几类扩展的抽象CurvesFragment类。

I implemented an abstract CurvesFragment Class that is extended by a few classes.

配置我的片段在图OnCreateView为:

I configure the chart during my fragment OnCreateView as:

    mChartView = ChartFactory.getTimeChartView(getActivity().getApplicationContext(), mDataset, mRenderer, "HH:mm:ss"); // X axis in a time scale
    // Setup chart renderer =============================
    mRenderer.setLabelsTextSize(15); // Text size
    mRenderer.setMargins(new int[] { 0, Utils.convertToPx(5, getActivity().getApplicationContext()), 0, 0 }); // 5dp on the left to show that little line
    mRenderer.setZoomButtonsVisible(false); // bye bye zoom
    mRenderer.setShowAxes(true); // show both axes
    mRenderer.setShowLegend(false); // bye bye legend
    mRenderer.setShowGridX(true); // X grid helps identify values
    mRenderer.setShowLabels(true); // See the values
    mRenderer.setYLabelsAlign(Align.LEFT); // put the Y labels on the left of the axis
    if (Utils.getCurrentTheme(getActivity().getApplicationContext()) == android.R.style.Theme_Holo) {
        mRenderer.setXLabelsColor(getResources().getColor(android.R.color.primary_text_dark));
        mRenderer.setYLabelsColor(0, getResources().getColor(android.R.color.primary_text_dark));
        mRenderer.setMarginsColor(getResources().getColor(android.R.color.background_dark));
        legend.setBackgroundResource(R.drawable.border_dark);
    } else {
        // same as above but for Holo_light
    }
  // And from here proceed to add the TimeCharts with using
  renderer.setDisplayChartValues(false);

在我的行动吧我包括暂停/恢复,ResetZoom按钮。 复位缩放很简单:

On my action bar I included buttons for Pause/Resume and ResetZoom. the Reset Zoom is simple:

        mRenderer.setXAxisMax(-Double.MAX_VALUE);
        mRenderer.setXAxisMin(Double.MAX_VALUE);
        mRenderer.setYAxisMax(-Double.MAX_VALUE);
        mRenderer.setYAxisMin(Double.MAX_VALUE);
        mChartView.repaint();

有保存引用是始终从WiFi读取新的数据,并把它们添加到该系列中的时间序列后台服务。这样一来,在片​​段有一个可运行的执行每次调用重绘()为700毫秒:

There's a background service that holds references to the TimeSeries that is always reading fresh data from the WiFi and adding them to the series. That way, in the fragment there's a runnable executing every 700ms that calls repaint() as:

// Chart rendering control ========================
private Runnable updateDataSet = new Runnable() {

    public void run() {
        if (!chartPaused) {

            double max = mRenderer.getXAxisMax(); // get renderer maximum value
            double min = mRenderer.getXAxisMin(); // get renderer minimum value

            // Check if the user scrolled/zoomed/panned the graph or if it's on 'auto'
            if (!((max == Double.MAX_VALUE || max == -Double.MAX_VALUE) && (min == Double.MAX_VALUE || min == -Double.MAX_VALUE))) {

                double newMax = mDataset.getSeriesAt(0).getMaxX(); // new max is the latest value from our series
                double newMin = newMax - Math.abs(max - min); // new min value is the X range the user zoomed into
                mRenderer.setXAxisMax(newMax); // set the new values
                mRenderer.setXAxisMin(newMin);
            }

            // Logic that updates the TableLayout with the legend is placed here

            mChartView.repaint();
        }

        getView().postDelayed(updateDataSet, 700);
    }
};

和有一个ZoomListener和PanListener每个用户触摸它一次暂停图表。这样,用户可以缩放和平移,但每当它恢复图表更新它只会向前滚动到的最早的数据,而无需改变缩放级别。

and there's a ZoomListener and a PanListener that pauses the chart every time the user touches it. That way the user can zoom and pan around, but whenever it resumes the chart updating it will only scroll forward to the earliest data without changing the zoom level.

我想最后的结果是pretty的坚实看起来不错,两个Holo_Light和Holo_Dark。

I guess the final result is pretty solid and looks nice on both Holo_Light and Holo_Dark.

谢谢拍作为丹的答案和其他开发者创建的引擎。

Thanks a LOT for Dan for the answers and for all other devs that created the engine.

编码快乐!

推荐答案

问题1.您可以尝试使用这些API调用播放:

Question 1. You can try to play with these API calls:

mRenderer.setShowLegend(false);

mRenderer.setMargins(new int[] {top, left, bottom, right});

也许减少底价值呢?

Maybe decrease the bottom value?

问题2。 一)

mRenderer.setXLabelsColor();
mRenderer.setYLabelsColor();

B)

mRenderer.setXLabelsAlign();

C)

我想你能做到以下几点,当串联得到新的值:

I think you can do the following, when the series get new values:

mRenderer.setXAxisMin();
mRenderer.setXAxisMax();

提供在x分钟和X最大值作为要显示的范围,并调用mChartView.repaint();在那之后。

Provide the x min and x max values as the range to be displayed and call mChartView.repaint(); after that.

D)同为C)

作为一个建议,请尝试在几个较小的分裂这么长的问题,你可能会得到答案更快。不会有太多的ACE用户知道如何回答所有的问题。即使这个库的作者必须考虑一些答案:)

As a suggestion, please try to split such long questions in several smaller ones and you may get answers faster. There aren't many ACE users to know how to answer all questions. Even the author of this library has to think about some answers :)