2013-08-28 1 views
1

막대 차트에서 사용자가 선택한 특정 막대의 색상을 변경해야합니다. 언제든지 사용자가 막대를 선택하면 해당 막대의 색상을 변경하고 다시 막대의 선택을 변경하면 마지막으로 선택한 막대가 기본 색상으로 표시됩니다.Achartengine에서 선택된 막대의 색상 변경

참고 : 하나의 게시물에서 내가 선택한 바를 포함하는 시리즈를 하나 더 사용해야한다는 것을 알게되었습니다. 그러나 그것을 이해하기 위해서는 몇 가지 샘플 코드가 필요합니다.

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; 
    } 

}

답변

0

난 당신이 차트보기에 클릭 이벤트를 처리하는 참조하십시오. 모든 바 시리즈에는 고유 한 색상이 있습니다. 다른 색깔의 술집을 가지려면 다른 계열에 속해야합니다. 이 경우, 속한 계열에서 막대를 제거하고 하나의 항목 인 선택된 막대가있는 다른 계열을 추가해야합니다.

두 번째 클릭시 위의 동작을 역으로 수행하십시오.

0

아직도 관심이있는 사람들에게. 다른 시리즈를 추가 할 필요가 없습니다 (그리고 그것은 afaik 별도로 그려집니다). 아래 예제처럼 차트를 확장하고 그림을 그릴 수 있습니다. (내 프로젝트에서는 GestureDetector와 ScaleGestureDetector를 통해 내 자신의 스크롤/확대/축소를 사용하고 onClick 대신 GestureDetector의 onSingleTapUp을 사용합니다).

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()); 
} 

}

: 차트의 뷰의 인스턴스를 얻기 위해 아래의 클래스에서의 getView를 사용