java - 如何在android中使用Chart自定义条形图

Question

我正在使用 Achart 库绘制条形图。我想自定义图表如下:

1. 在从头开始的第一个小节之间留出空间
2. 增加每个条形的宽度
3. 增加条形顶部数字的文本大小

以下是我的条形图的代码:

    ![private void openChart()
 {

     int\[\] x = { 0,1,2,3,4,5,6};



     // Creating an XYSeries for Income
     XYSeries wSeries = new XYSeries("Workout");
     // Creating an XYSeries for Expense

     for(int i=0;i<x.length;i++){
         wSeries.add(i,workout\[i\]);

     }

     // Creating a dataset to hold each series
     XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
     // Adding Income Series to the dataset
     dataset.addSeries(wSeries);
     // Adding Expense Series to dataset


     // Creating XYSeriesRenderer to customize incomeSeries
     XYSeriesRenderer wRenderer = new XYSeriesRenderer();
     wRenderer.setColor(getResources().getColor(R.color.header_blue)); //color of the graph set to cyan
     wRenderer.setFillPoints(true);
     wRenderer.setLineWidth(5);
     wRenderer.setDisplayChartValues(true);
     wRenderer.setDisplayChartValuesDistance(20); //setting chart value distance 



     // Creating a XYMultipleSeriesRenderer to customize the whole chart
     XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
     multiRenderer.setOrientation(XYMultipleSeriesRenderer.Orientation.HORIZONTAL);
     multiRenderer.setXLabels(0);

     /***
     * Customizing graphs
     */
    //setting text size of the title
     multiRenderer.setChartTitleTextSize(30);
     //setting text size of the axis title
     multiRenderer.setAxisTitleTextSize(30);
     //setting text size of the graph lable
     multiRenderer.setLabelsTextSize(30);
     //setting zoom buttons visiblity
     multiRenderer.setZoomButtonsVisible(false);
     //setting pan enablity which uses graph to move on both axis
     multiRenderer.setPanEnabled(false, false);
     //setting click false on graph
     multiRenderer.setClickEnabled(false);
     //setting zoom to false on both axis
     multiRenderer.setZoomEnabled(false, false);
     //setting lines to display on y axis
     multiRenderer.setShowGridY(false);
     //setting lines to display on x axis
     multiRenderer.setShowGridX(false);
     //setting legend to fit the screen size
     multiRenderer.setFitLegend(true);
     //setting displaying line on grid
     multiRenderer.setShowGrid(false);
     //setting zoom to false
     multiRenderer.setZoomEnabled(false);
     //setting external zoom functions to false
     multiRenderer.setExternalZoomEnabled(false);
     //setting displaying lines on graph to be formatted(like using graphics)
     multiRenderer.setAntialiasing(true);
     //setting to in scroll to false
     multiRenderer.setInScroll(false);
     //setting to set legend height of the graph
     multiRenderer.setLegendHeight(30);
     //setting x axis label align
     multiRenderer.setXLabelsAlign(Align.CENTER);
     //setting y axis label to align
     multiRenderer.setYLabelsAlign(Align.RIGHT);
     //setting text style
     multiRenderer.setTextTypeface("sans_serif", Typeface.BOLD);
     //change y axis label color
     multiRenderer.setYLabelsColor(0,Color.BLACK);
     //change x axis label color
     multiRenderer.setXLabelsColor(Color.BLACK);
     //setting no of values to display in y axis
     multiRenderer.setYLabels(7);
     // setting y axis max value, Since i'm using static values inside the graph so i'm setting y max value to 4000.
     // if you use dynamic values then get the max y value and set here
     multiRenderer.setYAxisMin(0);
     multiRenderer.setYAxisMax(49);

     //setting used to move the graph on xaxiz to .5 to the right
     multiRenderer.setXAxisMin(0);
    //setting max values to be display in x axis
     multiRenderer.setXAxisMax(7);
     //setting bar size or space between two bars
     multiRenderer.setBarSpacing(3);
     //Setting background color of the graph to transparent
     multiRenderer.setBackgroundColor(Color.TRANSPARENT);
     //Setting margin color of the graph to transparent
    multiRenderer.setMarginsColor(getResources().getColor(R.color.light_red));
     multiRenderer.setApplyBackgroundColor(true);

     //setting the margin size for the graph in the order top, left, bottom, right
     multiRenderer.setMargins(new int\[\]{20, 40, 20, 20});

     for(int i=0; i< x.length;i++){
     multiRenderer.addXTextLabel(i, week\[i\]);
     }

     // Adding incomeRenderer and expenseRenderer to multipleRenderer
     // Note: The order of adding dataseries to dataset and renderers to multipleRenderer
     // should be same
     multiRenderer.addSeriesRenderer(wRenderer);


     //this part is used to display graph on the xml
     LinearLayout chartContainer = (LinearLayout) findViewById(R.id.nut_sum_graphLayout);
     //remove any views before u paint the chart
     chartContainer.removeAllViews();
     //drawing bar chart
     mChart = ChartFactory.getBarChartView(HealthNutritionSummary.this, dataset, multiRenderer,Type.DEFAULT);
     //adding the view to the linearlayout
     chartContainer.addView(mChart);

    }][2]

Answer 1

为了在图表左侧留出空间，我将 X 轴最小值设置为较小的尺寸。例如，这应该可以解决您的情况。

multiRenderer.setXAxisMin(-0.5);

要增加宽度，您有两种选择。您可以设置条形间距或条形宽度。

multiRenderer.setBarSpacing(0.5);

或

multiRenderer.setBarWidth(20); // I think this is in pixels

最后，对于文本大小，可以选择 XYSeriesRenderer，根据您的情况:

wRenderer.setChartValuesTextSize(20);