WilliamChart圖表庫

MMM 8年前發布 | 8K 次閱讀 Android開發 移動開發

 介紹:

WilliamChart 是一個為安卓項目提供圖表控件的開源庫,他實現了數字的可視化,用作者的話說“我者喜歡看起來干凈簡單的圖表,不想要那么多花哨的功能”。代碼下載點這里:http://jcodecraeer.com/a/opensource/2014/1011/1738.html

 


</p>

運行效果:

使用說明:

創建一個新的chart需要繼承自ChartView的坐標軸,同時實現一些必要的方法。我覺的這些方法足以讓你繪制出任何你想要的效果。

xml

  • 1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19
    </td>

    <com.db.chart.view.ChartView

    android:layout_width= "match_parent"

    android:layout_height= "dp"

    ...

    chart:chart_shadowDx= "dp"

    chart:chart_shadowDy= "dp"

    chart:chart_shadowRadius= "dp"

    chart:chart_shadowColor= "color"

    chart:chart_fontSize= "dp"

    chart:chart_typeface= "typeface"

    chart:chart_axisBorderSpacing= "dp"

    chart:chart_axisThickness= "dp"

    chart:chart_axisTopSpacing= "dp"

    chart:chart_axisColor= "color"

    chart:chart_axisX= "boolean"

    chart:chart_label= "boolean"

    chart:chart_labelColor= "color"

    />
    </div> </td> </tr> </tbody> </table> </div> </div>

    --

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24
    </td>

    // Customize labels

    chart.setLabels(NONE/OUTSIDE/INSIDE)

    chart.setLabelColor(color)

    chart.setFontSize(integer)

    chart.setTypeface(typeface)

    // Define grid

    chart.setGrid(paint)

    chart.setHorizontalGrid(paint)

    chart.setVerticalGrid(paint)

    // Show threshold line

    chart.setThresholdLine(float, paint)

    chart.setMaxAxisValue(integer, integer)

    chart.setStep(integer)

    chart.setTopSpacing(dimen)

    chart.setBorderSpacing(dimen)

    chart.setAxisX(boolean)

    chart.show()

    // Update values of a given set

    chart.updateValues(int, array)

    // Notify chart about updated values

    chart.notifyDataUpdate()

    // Tooltip support

    chart.showTooltip(view)

    chart.dismissTooltip(view)
    </div> </td> </tr> </tbody> </table> </div> </div>

    LineChart(跟上面相同的部分用省略號)

    1

    2

    3
    </td>

    <com.db.chart.LineChartView

    ...

    />
    </div> </td> </tr> </tbody> </table> </div> </div>

    java代碼:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19
    </td>

    LineChartView chartView= new LineChartView()

    LineSet lineSet = new LineSet()

    lineSet.addPoint( new Point(string, float)

    // Style dots

    lineSet.setDots(boolean)

    lineSet.setDotsColor(color)

    lineSet.setDotsRadius(dimen)

    lineSet.setDotsStrokeThickness(dimen)

    lineSet.setDotsStrokeColor(color)

    // Style line

    lineSet.setLineThickness(dimen)

    lineSet.setLineColor(color)

    // Style background fill

    lineSet.setFill(boolean)

    lineSet.setFillColor(color)

    // Style type

    lineSet.setDashed(boolean)

    lineSet.setSmooth(boolean)

    chartView.addData(lineSet)
    </div> </td> </tr> </tbody> </table> </div> </div>

    BarChart & StackBarChart

  • 1

    2

    3

    4

    5
    </td>

    <com.db.chart.BarChartView

    ...

    chart:chart_barSpacing= "dp"

    chart:chart_setSpacing= "dp"

    />
    </div> </td> </tr> </tbody> </table> </div> </div>

    java代碼

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11
    </td>

    BarChartView chartView = new BarcChartView()

    barChart.setBarSpacing(dimen)

    barChart.setSetSpacing(dimen)

    barChart.setBarBackground(boolean)

    barChart.setBarBackgroundColor(color)

    barChart.setRoundCorners(dimen)

    BarSet barSet = new BarSet()

    Bar bar = new Bar(string, float)

    bar.setColor(color)

    barSet.addBar(bar)

    chartView.addData(barSet)
    </div> </td> </tr> </tbody> </table> </div> </div>

    Listener的設置

  • 1

    2

    3

    4

    5

    6
    </td>

    chart.setOnEntryClickListener( new OnEntryClickListener(){

    @Override

    public void onClick(int setIndex, int entryIndex, Rect entryRect) {

    //Do things

    }

    });
    </div> </td> </tr> </tbody> </table> </div> </div>

    動畫

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12
    </td>

    Animation anim = new Animation()

    anim.setDuration(integer)

    anim.setEasing(easingFunction)

    anim.setEndAction(runnable)

    // Animation overlap between entries

    anim.setOverlap(float)

    // Animation starting point

    anim.setStartPoint(float, float)

    // Include alpha transition

    anim.setAlpha(int)

    // Starts animation

    chart.animate(animation)
    </div> </td> </tr> </tbody> </table> </div> </div>

    實現BaseEasingMethod 接口你可以自定義你自己的動畫函數我已經實現了一些:

    • LinearEase

    • BounceEaseOut

    • ElasticEaseOut

    • CircEaseOut

    • CubicEaseOut

    • ExpoEaseOut

    • QuadEaseOut

    • QuartEaseOut

    • QuintEaseOut

    • SineEaseOut

     本文由用戶 MMM 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
     轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
     本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!
  • sesese色