Question

我必须更改用户在条形图中选择的特定条形图的颜色。当用户选择栏时，我想要更改该栏的颜色，如果用户更改栏的选择，则最后选择的栏将显示为默认颜色。

注意：我在一篇文章中看到，我必须再使用一个包含所选栏的系列，以便您可以实现这一目标。但是我需要一些示例代码来理解它。

private String[] mMonth = new String[] { "January", "Feburary", "March", "April", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec" };
int[] x = { 0, 1, 2, 3, 4, 5, 6, 7 };
int[] income = { 2000, 2500, 2700, 3000, 2800, 3500, 3700, 3800 };
public static final String TYPE = "type";
private XYMultipleSeriesDataset mDataset = getDemoDataset();
private XYMultipleSeriesRenderer mRenderer = getDemoRenderer();
private GraphicalView mChartView;



protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.xy_chart);
    if (mChartView == null) {
        LinearLayout layout = (LinearLayout) findViewById(R.id.chart);
        mChartView = ChartFactory.getBarChartView(this, mDataset, mRenderer, Type.DEFAULT);
        mRenderer.setSelectableBuffer(100);
        layout.addView(mChartView, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
    } else {
        mChartView.repaint();
    }

    mChartView.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            // handle the click event on the chart
              SeriesSelection seriesSelection = mChartView.getCurrentSeriesAndPoint();
              if (seriesSelection == null) {
                Toast.makeText(NewTest.this, "No chart element", Toast.LENGTH_SHORT).show();
              } else {  


                  for (int i = 0; i < x.length; i++) {
                      SimpleSeriesRenderer renderer = mRenderer.getSeriesRendererAt(seriesSelection.getSeriesIndex());
                      renderer.setColor(Color.RED);  
                    }


                    mChartView.repaint();

                // display information of the clicked point
                Toast.makeText(
                        NewTest.this,
                    "Chart element in series index " + seriesSelection.getSeriesIndex()
                        + " data point index " + seriesSelection.getPointIndex() + " was clicked"
                        + " closest point value X=" + seriesSelection.getXValue() + ", Y="
                        + seriesSelection.getValue(), Toast.LENGTH_SHORT).show();
              }
        }
    });

}

 private XYMultipleSeriesDataset getDemoDataset() {

        XYSeries incomeSeries = new XYSeries("Income");
        for (int i = 0; i < x.length; i++) {
            incomeSeries.add(i, income[i]);
        }

        XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
        dataset.addSeries(incomeSeries);
        return dataset;

    }

 private XYMultipleSeriesRenderer getDemoRenderer() {
        XYSeriesRenderer incomeRenderer =  new XYSeriesRenderer();
        incomeRenderer.setColor(Color.rgb(130, 130, 230));
        incomeRenderer.setFillPoints(true);
        incomeRenderer.setLineWidth(2);
        incomeRenderer.setChartValuesTextAlign(Align.CENTER);
        incomeRenderer.setChartValuesSpacing(15);
        incomeRenderer.setDisplayChartValues(true);

        XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
        multiRenderer.setXLabels(0);
        multiRenderer.setYLabelsPadding(15);
        multiRenderer.setBarSpacing(0.3f);
        multiRenderer.setBarWidth(30);
        multiRenderer.setChartTitle("Income Chart");
        multiRenderer.setXTitle("Year 2013");
        multiRenderer.setYTitle("Amount in Dollars");
        //multiRenderer.setZoomLimits(1.0,0.7,1.0,3000.0);
        multiRenderer.setZoomButtonsVisible(true);
        //multiRenderer.setZoomEnabled(true, true);
        //multiRenderer.setPanEnabled(true, true);
        multiRenderer.setInScroll(true);
        multiRenderer.setXAxisMin(-0.5);
        multiRenderer.setXAxisMax(7);
        multiRenderer.setYAxisMin(0);
        multiRenderer.setYAxisMax(4000);

        multiRenderer.setMargins(new int[] {30, 50, 20, 10});
        multiRenderer.setClickEnabled(true);
        multiRenderer.setShowGridX(true);


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

        multiRenderer.addSeriesRenderer(incomeRenderer);
        return multiRenderer;
    }

}

Answer 1

我看到你正在处理图表视图上的点击事件。每个酒吧系列都有自己的颜色。为了拥有不同颜色的条形，它必须属于另一个系列。在这种情况下，您必须从它所属的系列中删除该栏，并添加另一个只包含一个项目的系列，即所选栏。

在第二次单击时，反转上面的操作。

Answer 2

对于那些仍对此感兴趣的人。没有必要添加另一个系列（它将单独绘制）。你可以扩展图表并按照下面的例子进行绘图。（在我的项目中，我使用自己的滚动/缩放通过GestureDetector和ScaleGestureDetector，而不是onClick我使用GestureDetector的onSingleTapUp）。使用下面的类中的getView来获取图表视图的实例：

public class SelectableBarChart extends BarChart {

private int selectedSeriesIndex = -1;
private int selectedBar = -1;
private final int highlightColor;
private OnBarSelectedListener barSelectedListener;

public static interface OnBarSelectedListener {
    void onBarSelected(SeriesSelection seriesSelection);
}

public void setBarSelectedListener(OnBarSelectedListener barSelectedListener) {
    this.barSelectedListener = barSelectedListener;
}

public static GraphicalView getView(Context context, XYMultipleSeriesDataset dataset, XYMultipleSeriesRenderer renderer, Type type, int highlightColor) {
    final SelectableBarChart chart = new SelectableBarChart(dataset, renderer, type, highlightColor);
    final GraphicalView graphicalView = new GraphicalView(context, chart);
    graphicalView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            chart.onClick(graphicalView);
        }
    });
    return graphicalView;
}

public void onClick(GraphicalView view) {
    onSelectionTap(view, view.getCurrentSeriesAndPoint());
}

protected void onSelectionTap(GraphicalView view, SeriesSelection seriesSelection) {
    if (seriesSelection != null) {
        selectedSeriesIndex = seriesSelection.getSeriesIndex();
        XYSeries selectedSeries = getDataset().getSeriesAt(selectedSeriesIndex);
        selectedBar = selectedSeries.getIndexForKey(seriesSelection.getXValue());
    }
    if (barSelectedListener != null)
        barSelectedListener.onBarSelected(seriesSelection);
    view.repaint();
}

@Override
public void drawSeries(Canvas canvas, Paint paint, List<Float> points, SimpleSeriesRenderer seriesRenderer, float yAxisValue, int seriesIndex, int startIndex) {
    int seriesNr = mDataset.getSeriesCount();
    boolean selectedSeries = seriesIndex == selectedSeriesIndex;
    int length = points.size();
    paint.setStyle(Paint.Style.FILL);
    float halfDiffX = getHalfDiffX(points, length, seriesNr);
    for (int i = 0; i < length; i += 2) {
        paint.setColor(selectedSeries && i == 2*(selectedBar-startIndex) ? highlightColor : seriesRenderer.getColor());
        float x = points.get(i);
        float y = points.get(i + 1);
        drawBar(canvas, x, yAxisValue, x, y, halfDiffX, seriesNr, seriesIndex, paint);
    }
    paint.setColor(seriesRenderer.getColor());
}

}

更改Achartengine中所选栏的颜色

2 个答案: