自定义achart引擎XYMultipleSeriesRenderer显示

时间:2014-04-08 18:50:21

标签: android charts achartengine

我目前正在开发一个Android应用程序,我需要显示linegraph。我选择了achartengine并用时间序列制作XYMultipleSeriesRenderer。我正在使用以下代码。

private void openChart(){       

    int count = 5;
    Date[] dt = new Date[5];
    for(int i=0;i<count;i++){
        GregorianCalendar gc = new GregorianCalendar(2012, 10, i+1);
        dt[i] = gc.getTime();
    }

    int[] visits = { 40,40,40,40,40};
    int[] views = {55, 51, 44, 41, 39};     

    // Creating TimeSeries for Visits
    TimeSeries visitsSeries = new TimeSeries("Theshold");       

    // Creating TimeSeries for Views
    TimeSeries viewsSeries = new TimeSeries("Readings");        

    // Adding data to Visits and Views Series
    for(int i=0;i<dt.length;i++){
        visitsSeries.add(dt[i], visits[i]);
        viewsSeries.add(dt[i],views[i]);
    }

    // Creating a dataset to hold each series
    XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();

    // Adding Visits Series to the dataset
    dataset.addSeries(visitsSeries);

    // Adding Visits Series to dataset
    dataset.addSeries(viewsSeries);     


    // Creating XYSeriesRenderer to customize visitsSeries      
    XYSeriesRenderer thresholdRenderer = new XYSeriesRenderer();
    thresholdRenderer.setColor(Color.GREEN);
    thresholdRenderer.setPointStyle(PointStyle.CIRCLE);
    thresholdRenderer.setFillPoints(true);
    thresholdRenderer.setLineWidth(2);
    thresholdRenderer.setDisplayChartValues(true);


    // Creating XYSeriesRenderer to customize viewsSeries
    XYSeriesRenderer readingRenderer = new XYSeriesRenderer();
    readingRenderer.setColor(Color.BLUE);
    readingRenderer.setPointStyle(PointStyle.CIRCLE);
    readingRenderer.setFillPoints(true);
    readingRenderer.setLineWidth(2);
    readingRenderer.setDisplayChartValues(true);


    // Creating a XYMultipleSeriesRenderer to customize the whole chart
    XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
    multiRenderer.setLabelsTextSize(20);
    multiRenderer.setXLabelsPadding(5);
    multiRenderer.setYAxisMax(90);
    multiRenderer.setYAxisMin(-20);
    multiRenderer.setXTitle("Time Stamps");
    multiRenderer.setYTitle("Temperature");
    multiRenderer.setZoomButtonsVisible(true);      

    // Adding visitsRenderer and viewsRenderer to multipleRenderer
    // Note: The order of adding dataseries to dataset and renderers to multipleRenderer
    // should be same
    multiRenderer.addSeriesRenderer(thresholdRenderer);
    multiRenderer.addSeriesRenderer(readingRenderer);

    // Getting a reference to LinearLayout of the MainActivity Layout
    LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container);

    // Creating a Time Chart
    mChart = (GraphicalView) ChartFactory.getTimeChartView(getBaseContext(), dataset, multiRenderer,"dd-MMM-yyyy");         

    multiRenderer.setClickEnabled(true);
    multiRenderer.setSelectableBuffer(10);

    // Setting a click event listener for the graph
    mChart.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Format formatter = new SimpleDateFormat("dd-MMM-yyyy");

            SeriesSelection seriesSelection = mChart.getCurrentSeriesAndPoint();

            if (seriesSelection != null) {                  
                int seriesIndex = seriesSelection.getSeriesIndex();
                String selectedSeries="Visits";
                if(seriesIndex==0)
                    selectedSeries = "Visits";
                else
                    selectedSeries = "Views";

                // Getting the clicked Date ( x value )
                long clickedDateSeconds = (long) seriesSelection.getXValue();
                Date clickedDate = new Date(clickedDateSeconds);
                String strDate = formatter.format(clickedDate);

                // Getting the y value 
                int amount = (int) seriesSelection.getValue();

                // Displaying Toast Message
                Toast.makeText(
                       getBaseContext(),
                       selectedSeries + " on "  + strDate + " : " + amount ,
                       Toast.LENGTH_SHORT).show();
            }
        }

    });

    // Adding the Line Chart to the LinearLayout
    chartContainer.addView(mChart);
} 

使用上面的代码,我可以生成以下视图 enter image description here

我现在停留在自定义视图上。如何删除图表周围的黑色背景。我怎样才能增加图例的文本大小以及xlabel和ylabel。 使用setLabelsTextSize只会增加x和y轴数据的大小(例如日期和温度值)。

谢谢

更新图片: enter image description here

2 个答案:

答案 0 :(得分:3)

要更改图例文字大小,请使用multiRenderer.setLegendTextSize()。要更改轮廓背景颜色,请使用multiRenderer.setMarginsColor()

作为一般说明,涉及整个图表的自定义可能会在XYMultipleSeriesRenderer中找到。我建议玩不同的设置并找到每个设置。

其他

要增加轴标题大小,请使用multiRenderer.setAxesTitleSize()。至于轴标签颜色,请使用multiRenderer.setXLabelsColor()multiRenderer.setYLabelsColor()。可以使用multiRenderer.setAxesColor()更改轴颜色。

同样,我鼓励您使用渲染器的设置。在IDE中,键入multiRenderer.,将显示所有可用的方法。滚动浏览这些内容,你可以找到你正在寻找的东西。大多数方法都有清晰的描述性名称。

答案 1 :(得分:2)

Change the color and font size use these code 

XYSeriesRenderer incomeRenderer = new XYSeriesRenderer();
            incomeRenderer.setColor(Color.rgb(130, 130, 230));
            incomeRenderer.setChartValuesTextSize(15);
            incomeRenderer.setDisplayChartValues(true);
            XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
            multiRenderer.setXLabels(0);
            multiRenderer.setChartTitle("Question vs Time Chart");
            multiRenderer.setInScroll(true);
            multiRenderer.setXTitle("Questions");
            multiRenderer.setLabelsColor(Color.BLACK);
            multiRenderer.setAxesColor(Color.BLACK);
            multiRenderer.setXLabelsColor(Color.RED);
            multiRenderer.setYLabelsColor(0, Color.RED);
            multiRenderer.setLabelsTextSize(15);
            multiRenderer.setYLabelsPadding(10);
            multiRenderer.setZoomEnabled(false, false);
            double[] set_pan=new double[]{-1.0,Double.MAX_VALUE,0.0,Double.MAX_VALUE+2};
            multiRenderer.setPanLimits(set_pan);
            multiRenderer.setPanEnabled(true, false);
            multiRenderer.setLegendTextSize(15);
            multiRenderer.setAxisTitleTextSize(18);
            multiRenderer.setChartTitleTextSize(25);
            multiRenderer.setTextTypeface("Arial", Typeface.BOLD);
            multiRenderer.setMarginsColor(Color.WHITE);