HelloCharts 使用總結

楊旭發表於2019-01-19

HelloChart常見的API

一、主要的類

XXXValue:用來對單個的資料進行包裝。如PointValue、SubcolumnValue;
XXXChartData:圖表的資料模型。如LineChartData、ColumnChartData;
XXXChartView:圖表控制元件物件。如LineChartView、ColumnChartView;
PreviewXXXChartView:圖表控制元件的預覽控制元件。如PreviewLineChartView;
Axis:座標軸;
Viewport:檢視視窗,用來控制圖表空間的縮放效果和顯示。

二、通用的API

AbstractChartData //圖表的資料模型抽象類。

setValueLabelBackgroundEnabled(boolean isValueLabelBackgroundEnabled):設定是否顯示標籤的背景
setValueLabelBackgroundColor(int valueLabelBackgroundColor):設定標籤背景顏色
setValueLabelsTextColor(int valueLabelTextColor):設定標籤文字顏色,預設為白色
setValueLabelTextSize(int valueLabelTextSize):設定標籤文字字號,預設為12sp
setValueLabelTypeface(Typeface typeface):設定標籤文字字型
setValueLabelBackgroundAuto(boolean isValueLabelBackgrountAuto):設定是否自動繪製標籤背景
不使用自動繪製背景
不使用自動繪製背景,會使用valueLabelBackgroundColor所設定的顏色,預設為灰色。
使用自動繪製背景
使用自動繪製背景,會使用Line的顏色作為標籤背景色。
setAxisXBottom(Axis axisX):在圖表下方設定x軸
setAxisYLeft(Axis axisY):在圖表左側設定y軸
setAxisXTop(Axis axisX):在圖表上方設定x軸
setAxisYRight(Axis axisY):在圖表右側設定y軸

Axis

static generateAxisFromRange(float start, float stop, float step):生成從值start到stop按照step等差的Axis軸物件。
static generateAxisFromCollection(List<Float> axisValues):根據集合axisValues生成Axis軸物件。
static generateAxisFromCollection(List<Float> axisValues, List<String> axisValuesLabels):根據集合axisValues生成軸物件,axisValuesLabels作為軸座標對應的標籤。
setValues(List<AxisValue> values):設定該軸的座標資訊。
setName(String name):設定軸的名稱,預設為空不顯示。
setTextSize(int textSize):設定設定軸標籤和名稱的字號,預設為12sp。
setTypeface(Typeface typeface):設定軸標籤和名字的字型。
setTextColor(int color):設定軸標籤和名字的顏色。
setAutoGenerated(boolean isAutoGenerated):設定是否自動生成軸物件,自動適應表格的範圍。
setHasLines(boolean hasLines):設定是否顯示座標網格。
setLineColor(int lineColor):設定網格線的顏色。
setInside(boolean isInside):設定是否將軸座標的值顯示在圖表內側。
setInside的效果
setMaxLabelChars(int maxLabelChars):設定軸標籤可顯示的最大字元個數,範圍在0-32之間。
setFormatter(AxisValueFormatter formatter):設定軸座標格式化工具
setHasSeparationLine(boolean hasSeparationLine):設定是否顯示軸標籤與圖表之間的分割線

AxisValue //Axis軸座標類。

setValue(float value):設定該軸座標的值
setLabel(String label):設定該軸座標的標籤

AbstractChartView //圖表檢視抽象類。

setInteractive(boolean isInteractive):設定該圖表是否可互動。如不可互動,則圖表不會響應縮放、滑動、選擇或點選等操作。預設值為true,可互動。
setZoomEnabled(boolean isZoomEnabled):設定是否可縮放。
setScrollEnabled(boolean isScrollEnabled):設定是否可滑動。
moveTo(float x, float y):將檢視視窗(viewport)移動至指定位置。如果可以移動,viewport將以該點為檢視的中心。
moveToWithAnimation(float x, float y):以動畫的形式移動viewport。
setZoomType(ZoomType zoomType):設定縮放型別,可選的型別包括:ZoomType.HORIZONTAL_AND_VERTICAL, ZoomType.HORIZONTAL, ZoomType.VERTICAL,預設值為HORIZONTAL_AND_VERTICAL。
setMaxZoom(float maxZoom):設定最大縮放比例。預設值20。
setZoomLevel(float x, float y, float zoomLevel):以座標(x,y)為中心,自動縮放表格。注意,該方法應在設定完chartview的資料(chartdata)後再呼叫。
setZoomLevelWithAnimation(float x, float y, float zoomLevel)
setValueTouchEnabled(boolean isValueTouchEnabled):設定是否允許點選圖示上的值,預設為true。
setMaximumViewport(Viewport maxViewport):設定最大化的viewport。注意,該方法應在設定完chartview的資料(chartdata)後再呼叫。
setCurrentViewport(Viewport targetViewport):設定當前的viewport
setCurrentViewportWithAnimation(Viewport targetViewport)
resetViewports():重新計算最大化和當前viewport
setValueSelectionEnabled(boolean isValueSelectionEnabled):設定是否可以選中圖表中的值,即當點選圖表中的資料值後,會一直處於選中狀態,直到使用者點選其他空間。預設為false。
selectValue(SelectedValue selectedValue):選中一個資料值
setContainerScrollEnabled(boolean isContainerScrollEnabled, ContainerScrollType containerScrollType):設定是否允許圖表在父容器中滑動。
startDataAnimation():開始以動畫的形式更新圖表資料。
startDataAnimation(long duration)
cancelDataAnimation()
setDataAnimationListener(ChartAnimationListener animationListener):設定資料動畫的監聽器
setViewportCalculationEnabled(boolean isEnabled):設定是否允許在動畫進行中或設定完表格資料後,自動計算viewport的大小。如果禁止,則需要可以手動設定。
setViewportAnimationListener(ChartAnimationListener animationListener):設定viewport動畫的監聽器
setViewportChangeListener(ViewportChangeListener viewportChangeListener):設定viewport發生變化的監聽器

Viewport
通過left, top, right, bottom四邊確定的一個矩形區域。用來控制檢視視窗的縮放。

set(float left, float top, float right, float bottom):設定大小。
left和right可以控制我們在x軸上想要顯示哪部分資料,同理,top和bottom可以控制我們在y軸上要展示的資料。
offset(float dx, float dy):使viewport發生偏移,dx為正數表示向右,dy為正數表示向下
offsetTo(float newLeft, float newTop):使viewport偏移到指定位置,寬高不會改變
inset(float dx, float dy):使viewport縮放,dx為正數會使viewport的寬邊窄,dy為正數會使viewport的高度變長。即如果是正數,會放大所要顯示的區域。
contains(float x, float y):判斷點(x,y)是否在viewport內
contains(float left, float top, float right, float bottom):判斷矩形是否在viewport內
contains(Viewport v)

SelectedValue //用來儲存選中的值的索引的包裝類。

setFirstIndex(int firstIndex):設定第一個索引,如LineChart中表示第幾條線的值(lineIndex)。
setSecondIndex(int secondIndex):設定第二個索引,如LineChart中表示該條線上的第幾個值(valueIndex)。
setType(SelectedValueType type):設定型別。
set(int firstIndex, int secondIndex, SelectedValueType type)

三、常用圖表介紹

1、折線圖Line

PointValue ——- //對“點”的封裝類。

set(float x, float y):設定點的值
setLabel(String label):點的標籤資訊

Line——-//對“線”的封裝類

setColor(int color):線的顏色
setPointColor(int pointColor):點的顏色
setAreaTransparency(int areaTransparency):透明度?
setStrokeWidth(int strokeWidth):線的粗細
setPointRadius(int pointRadius):點的半徑
setHasPoints(boolean hasPoints):是否顯示點
setHasLines(boolean hasLines):是否顯示線
setHasLabels(boolean hasLabels):是否顯示標籤
setHasLabelsOnlyForSelected(boolean hasLabelsOnlyForSelected):是否只有在點選“點”時才顯示標籤
setCubic(boolean isCubic):是否是平滑曲線
setSquare(boolean isSquare):是否以直角的形式顯示線
直角顯示
setFilled(boolean isFilled):是否對線的下方填充
填充
setShape(ValueShape shape):“點”的樣式,預設提供ValueShape.CIRCLE(圓形)、ValueShape.SQUARE (方形)、ValueShape.DIAMOND(菱形)三種樣式。
setPathEffect(PathEffect pathEffect):線的路徑效果
路徑效果
setValues(List<PointValue> values):List集合,用來儲存線上的每個點的資訊。

LineChartData—–//折線圖資料模型類。

setLines(List<Line> lines):設定所要展示的“線”
setBaseValue(float baseValue):設定資料的初始值,即所有的資料從baseValue開始計算,預設值為0。

LineChartView

setOnValueTouchListener(LineChartOnValueSelectListener touchListener):設定資料值點選監聽。
LineChartOnValueSelectListener需要實現onValueSelected(int lineIndex, int pointIndex, PointValue value)和onValueDeselected()兩個監聽回撥方法。
lineIndex表示點選的“線”的索引,pointIndex表示點選的“點”的索引,value表示該“點”的值。

PreviewLineChartView————–//折線圖的預覽檢視。

setPreviewColor(int color)

2、柱狀圖Column

SubcolumnValue————–//用來儲存子柱狀圖資訊。

setValue(float value)

Column

用來表示一組柱狀圖。一組柱狀圖可以分成多個子柱狀圖。
setValues(List<SubcolumnValue> values):設定柱狀圖的資料內容。

ColumnChartData—————-//柱狀圖資料模型類。

setColumns(List<Column> columns):設定資料
setStacked(boolean isStacked):設定是否將同一組的資料進行堆疊顯示
堆疊
setFillRatio(float fillRatio):設定組與組之間的間隔比率。取值範圍從0-1,1表示組與組之間不留任何間隔,0表示組之間會留有2px的間隔。
setBaseValue(float baseValue)

ColumnChartView

setColumnChartData(ColumnChartData data):設定柱狀圖的資料
setOnValueTouchListener(ColumnChartOnValueSelectListener touchListener):設定柱狀圖點選監聽。

3、餅狀圖Pie
注意,餅狀圖與其他圖表不同的是,餅狀圖並沒有軸,也不支援縮放。為了更好的顯示效果,餅狀圖的佈局寬高應相等。

SliceValue———-//餅狀圖中“扇形”的資料模型。

setValue(float value):設定值
setColor(int color):設定顏色
setSliceSpacing(int sliceSpacing)
setLabel(String label):設定標籤

PieChartData—-餅狀圖的資料模型

setValues(List<SliceValue> values)
setHasLabelsOutside(boolean hasLabelsOutside):設定是否將標籤顯示在餅狀圖外側。False顯示在內測,true顯示在外側。
setHasCenterCircle(boolean hasCenterCircle):設定餅狀圖中心是否為空心圓
setCenterCircleColor(int centerCircleColor):設定空心圓的顏色
setCenterCircleScale(float centerCircleScale):設定空心圓的大小
setCenterText1(String centerText1):設定餅狀圖中心的文字1
setCenterText2(String centerText2)
setCenterText1FontSize(int centerText1FontSize):設定餅狀圖中心文字1的大小
setCenterText1Typeface(Typeface text1Typeface)
setSlicesSpacing(int sliceSpacing):設定扇形之間的間距大小

PieChartView

setPieChartData(PieChartData data)
setOnValueTouchListener(PieChartOnValueSelectListener touchListener)
setChartRotation(int rotation, boolean isAnimated):設定餅狀圖旋轉的角度
setChartRotationEnabled(boolean isRotationEnabled):設定餅狀圖是否可以通過滑動來旋轉
setCircleFillRatio(float fillRatio):設定餅狀圖佔用控制元件的比例,取值範圍0-1。預設值為1,表示餅狀圖儘可能地佔滿整個控制元件。