每個系列的背景GraphView

Question

即時通訊使用Graphview和正常工作，但現在我有一個問題。

我想有被添加到圖中的每個系列的背景下，而不是對所有系列

這可能嗎？

Answer 1

這是目前（2014年8月5日）不可能在the original GraphView library。

我需要這個功能，所以我分叉庫並自己實現了這些功能。您可以在我的叉子的feature/series_specific_styles分支找到更新的代碼：

• https://github.com/mobiRic/GraphView/tree/feature/series_specific_styles

希望在將來的這些變化將被拉入到原來的庫。

---

實際的代碼更改相對簡單。

• 添加所需的背景領域GraphViewSeries.GraphViewSeriesStyle

• 更新LineGraphView.drawSeries()尋找這些領域，而不是依靠自身的內在價值。

我已經包含下面全更新，但要查看它們是提交頁面上的最簡單的方法：

• allow different background for each series

---

這裏是更新GraphViewSeriesStyle類：

static public class GraphViewSeriesStyle { 
    public int color = 0xff0077cc; 
    public int thickness = 3; 
    private ValueDependentColor valueDependentColor; 

    private final Paint paintBackground; 
    private boolean drawBackground; 
    private boolean drawDataPoints; 
    private float dataPointsRadius = 10f; 

    public GraphViewSeriesStyle() { 
     super(); 

     paintBackground = new Paint(); 
     paintBackground.setColor(Color.rgb(20, 40, 60)); 
     paintBackground.setStrokeWidth(4); 
     paintBackground.setAlpha(128); 
    } 

    public GraphViewSeriesStyle(int color, int thickness) { 
     super(); 
     this.color = color; 
     this.thickness = thickness; 

     paintBackground = new Paint(); 
     paintBackground.setColor(Color.rgb(20, 40, 60)); 
     paintBackground.setStrokeWidth(4); 
     paintBackground.setAlpha(128); 
    } 

    public ValueDependentColor getValueDependentColor() { 
     return valueDependentColor; 
    } 

    /** 
    * the color depends on the value of the data. 
    * only possible in BarGraphView 
    * @param valueDependentColor 
    */ 
    public void setValueDependentColor(ValueDependentColor valueDependentColor) { 
     this.valueDependentColor = valueDependentColor; 
    } 

    public boolean getDrawBackground() { 
     return drawBackground; 
    } 

    public void setDrawBackground(boolean drawBackground) { 
     this.drawBackground = drawBackground; 
    } 

    public Paint getPaintBackground() { 
     return paintBackground; 
    } 

    public int getBackgroundColor() { 
     return paintBackground.getColor(); 
    } 

    /** 
    * sets the background colour for the series. This is not the background 
    * colour of the whole graph. 
    */ 
    public void setBackgroundColor(int color) { 
     paintBackground.setColor(color); 
    } 

    public float getDataPointsRadius() { 
     return dataPointsRadius; 
    } 

    public boolean getDrawDataPoints() { 
     return drawDataPoints; 
    } 

    /** 
    * sets the radius of the circles at the data points. 
    * @see #setDrawDataPoints(boolean) 
    * @param dataPointsRadius 
    */ 
    public void setDataPointsRadius(float dataPointsRadius) { 
     this.dataPointsRadius = dataPointsRadius; 
    } 

    /** 
    * You can set the flag to let the GraphView draw circles at the data points 
    * @see #setDataPointsRadius(float) 
    * @param drawDataPoints 
    */ 
    public void setDrawDataPoints(boolean drawDataPoints) { 
     this.drawDataPoints = drawDataPoints; 
    } 
} 

---

這裏是更新LineGraphView.drawSeries()方法：

public void drawSeries(Canvas canvas, GraphViewDataInterface[] values, float graphwidth, float graphheight, float border, double minX, double minY, double diffX, double diffY, float horstart, GraphViewSeriesStyle style) { 
    // draw background 
    double lastEndY = 0; 
    double lastEndX = 0; 

    // draw data 
    paint.setStrokeWidth(style.thickness); 
    paint.setColor(style.color); 


    Path bgPath = null; 
    if ((drawBackground) || (style.getDrawBackground())) { 
     bgPath = new Path(); 
    } 

    lastEndY = 0; 
    lastEndX = 0; 
    float firstX = 0; 
    for (int i = 0; i < values.length; i++) { 
     double valY = values[i].getY() - minY; 
     double ratY = valY/diffY; 
     double y = graphheight * ratY; 

     double valX = values[i].getX() - minX; 
     double ratX = valX/diffX; 
     double x = graphwidth * ratX; 

     if (i > 0) { 
      float startX = (float) lastEndX + (horstart + 1); 
      float startY = (float) (border - lastEndY) + graphheight; 
      float endX = (float) x + (horstart + 1); 
      float endY = (float) (border - y) + graphheight; 

      // draw data point 
      if (drawDataPoints) { 
       //fix: last value was not drawn. Draw here now the end values 
       canvas.drawCircle(endX, endY, dataPointsRadius, paint); 
      } else if (style.getDrawDataPoints()) { 
       canvas.drawCircle(endX, endY, style.getDataPointsRadius(), paint); 
      } 

      canvas.drawLine(startX, startY, endX, endY, paint); 
      if (bgPath != null) { 
       if (i==1) { 
        firstX = startX; 
        bgPath.moveTo(startX, startY); 
       } 
       bgPath.lineTo(endX, endY); 
      } 
     } else if ((drawDataPoints) || (style.getDrawDataPoints())) { 
      //fix: last value not drawn as datapoint. Draw first point here, and then on every step the end values (above) 
      float first_X = (float) x + (horstart + 1); 
      float first_Y = (float) (border - y) + graphheight; 
      if (drawDataPoints) { 
       canvas.drawCircle(first_X, first_Y, dataPointsRadius, paint); 
      } else if (style.getDrawDataPoints()) { 
       canvas.drawCircle(first_X, first_Y, style.getDataPointsRadius(), paint); 
      } 
     } 
     lastEndY = y; 
     lastEndX = x; 
    } 

    if (bgPath != null) { 
     // end/close path 
     bgPath.lineTo((float) lastEndX, graphheight + border); 
     bgPath.lineTo(firstX, graphheight + border); 
     bgPath.close(); 
     if (style.getDrawBackground()) { 
      canvas.drawPath(bgPath, style.getPaintBackground()); 
     } else { 
      canvas.drawPath(bgPath, paintBackground); 
     } 
    } 
} 

---

對於利息，該分支也允許數據點被配置爲每個系列 - 代碼改變這裏可見：

• allow datapoint styling for each series