使用HelloCharts繪制柱狀圖

首先下載依賴庫 ，有現成的jar包：hellocharts-library-1.5.8.jar

 

在需要的布局中直接使用：

<lecho.lib.hellocharts.view.ColumnChartView
android:id="@+id/columnchart"
android:layout_width="match_parent"
android:layout_height="match_parent" />

例如繪制一年的數據：

偽代碼：

//聲明所需變量
public final static String[] months = new String[] { "Jan", "Feb", "Mar",
            "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", };

    ColumnChartView columnChart;
    ColumnChartData columnData;
    List<Column> lsColumn = new ArrayList<Column>();
    List<SubcolumnValue> lsValue;

//初始化數據並顯示在圖表上

private void dataInit() {

int numSubcolumns = 1;
int numColumns = months.length;

List<AxisValue> axisValues = new ArrayList<AxisValue>();
List<Column> columns = new ArrayList<Column>();
List<SubcolumnValue> values;
for (int i = 0; i < numColumns; ++i) {

values = new ArrayList<SubcolumnValue>();
for (int j = 0; j < numSubcolumns; ++j) {
values.add(new SubcolumnValue((float) Math.random() * 50f + 5,
ChartUtils.pickColor()));
}
// 點擊柱狀圖就展示數據量
axisValues.add(new AxisValue(i).setLabel(months[i]));

columns.add(new Column(values).setHasLabelsOnlyForSelected(true));
}

columnData = new ColumnChartData(columns);

columnData.setAxisXBottom(new Axis(axisValues).setHasLines(true)
.setTextColor(Color.BLACK));
columnData.setAxisYLeft(new Axis().setHasLines(true)
.setTextColor(Color.BLACK).setMaxLabelChars(2));

columnChart.setColumnChartData(columnData);

// Set value touch listener that will trigger changes for chartTop.
columnChart.setOnValueTouchListener(new ValueTouchListener());

// Set selection mode to keep selected month column highlighted.
columnChart.setValueSelectionEnabled(true);

columnChart.setZoomType(ZoomType.HORIZONTAL);

}

 

/**
* 柱狀圖監聽器
*
* @author 1017
*
*/
private class ValueTouchListener implements
ColumnChartOnValueSelectListener {

@Override
public void onValueSelected(int columnIndex, int subcolumnIndex,
SubcolumnValue value) {
// generateLineData(value.getColor(), 100);
}

@Override
public void onValueDeselected() {

// generateLineData(ChartUtils.COLOR_GREEN, 0);

}
}

 最后出來的效果：

 

點擊對應的柱狀圖就會顯示當前項的數據；