hellocharts的折線圖與柱狀圖的結合之ComboLineColumnChartView

哼哼，網上找了半天都不全，所以決定自己寫一個完整的可以直接貼代碼的

test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <lecho.lib.hellocharts.view.ComboLineColumnChartView
        android:id="@+id/combochart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

AddColumnLineData.java(專門用於添加數據)

package com.shaoxin.myhellocharts;

import android.graphics.Color;

import java.util.ArrayList;
import java.util.List;

import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Column;
import lecho.lib.hellocharts.model.ColumnChartData;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.SubcolumnValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.util.ChartUtils;
import lecho.lib.hellocharts.view.ColumnChartView;

import static com.shaoxin.myhellocharts.LineColumn.comboChart;


/**
 * Created by shaoxin on 2016/12/22.
 */

public class AddColumnLineData {

    public final static String[] months = new String[]{"Jan", "Feb", "Mar",
            "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",};
    public static ColumnChartView columnChart;
    public static List<AxisValue> axisValues;


    //設置折線圖,添加設置好的數據
    public static LineChartData initLineCharData(List<Line> dataLine) {
        LineChartData lineCharData = new LineChartData(dataLine);
        //初始化軸
        Axis axisX = new Axis().setHasLines(true);
        Axis axisY = new Axis().setHasLines(true);
        axisX.setName("時間");
        axisY.setName("銷量");
        lineCharData.setAxisYLeft(axisY);
        lineCharData.setAxisXBottom(axisX);
        return lineCharData;
    }

    //定義方法設置折線圖中數據
    public static List<Line> initDataLine() {
        List<Line> lineList = new ArrayList<>();
        List<PointValue> pointValueList = new ArrayList<>();

        int numLines = months.length;
        for (int i = 0; i < numLines; ++i) {
            pointValueList.add(new PointValue(i, (float) Math.random() * 50f + 5));
            axisValues.add(new AxisValue(i).setLabel(months[i]));
        }

        Line line = new Line(pointValueList);
        line.setColor(Color.RED);
        line.setShape(ValueShape.CIRCLE);
        line.setHasLabelsOnlyForSelected(true);
        lineList.add(line);

        return lineList;
    }

    //定義方法設置柱狀圖中數據
    public static ColumnChartData initColumnCharData(List<Column> dataLine) {
        ColumnChartData columnData = new ColumnChartData(dataLine);


        columnData.setAxisXBottom(new Axis(axisValues).setHasLines(true)
                .setTextColor(Color.BLACK));
        columnData.setAxisYLeft(new Axis().setHasLines(true)
                .setTextColor(Color.BLACK).setMaxLabelChars(2));
        // Set selection mode to keep selected month column highlighted.
        comboChart.setValueSelectionEnabled(true);
        comboChart.setZoomType(ZoomType.HORIZONTAL);

        return columnData;
    }

    //定義方法設置柱狀圖中數據
    public static List<Column> initColumnLine() {
        List<Column> list = new ArrayList<>();
        List<SubcolumnValue> subcolumnValueList;
        axisValues = new ArrayList<AxisValue>();
        int numSubcolumns = 1;
        int numColumns = months.length;
        for (int i = 0; i < numColumns; ++i) {
            subcolumnValueList = new ArrayList<SubcolumnValue>();
            for (int j = 0; j < numSubcolumns; ++j) {
                subcolumnValueList.add(new SubcolumnValue((float) Math.random() * 50f + 5,
                        ChartUtils.pickColor()));
            }
            // 點擊柱狀圖就展示數據量
            axisValues.add(new AxisValue(i).setLabel(months[i]));
            list.add(new Column(subcolumnValueList).setHasLabelsOnlyForSelected(true));
        }
        return list;
    }

}

LineColumn.java

package com.shaoxin.myhellocharts;

import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

import java.util.List;

import lecho.lib.hellocharts.listener.ComboLineColumnChartOnValueSelectListener;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.Column;
import lecho.lib.hellocharts.model.ColumnChartData;
import lecho.lib.hellocharts.model.ComboLineColumnChartData;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.SubcolumnValue;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.view.ComboLineColumnChartView;

import static com.shaoxin.myhellocharts.AddColumnLineData.axisValues;
import static com.shaoxin.myhellocharts.AddColumnLineData.initColumnCharData;
import static com.shaoxin.myhellocharts.AddColumnLineData.initColumnLine;
import static com.shaoxin.myhellocharts.AddColumnLineData.initDataLine;
import static com.shaoxin.myhellocharts.AddColumnLineData.initLineCharData;

/**
 * Created by shaoxin on 2016/12/22.
 */

public class LineColumn extends AppCompatActivity {
    static ComboLineColumnChartView comboChart;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);
        comboChart = (ComboLineColumnChartView) findViewById(R.id.combochart);

        comboChart.setZoomEnabled(true);//設置是否支持縮放
        //為圖表設置值得觸摸事件
        //設置值觸摸偵聽器，將觸發圖表頂部的變化。
        comboChart.setOnValueTouchListener(new ComboLineColumnChartOnValueSelectListener() {
            @Override
            public void onColumnValueSelected(int i, int i1, SubcolumnValue subcolumnValue) {

            }

            @Override
            public void onPointValueSelected(int i, int i1, PointValue pointValue) {

            }

            @Override
            public void onValueDeselected() {

            }
        });
        //設置圖表是否可以與用戶互動
        comboChart.setInteractive(true);
        //設置圖表數據是否選中進行顯示
        comboChart.setValueSelectionEnabled(true);
        //定義組合數據對象
        ComboLineColumnChartData comboLineColumnChartData = new ComboLineColumnChartData();
        //為圖表設置數據，數據類型為ComboLineColumnChartData
        comboChart.setComboLineColumnChartData(comboLineColumnChartData);

        //為組合圖設置折現圖數據
        List<Line> dataLine = initDataLine();
        LineChartData lineCharData = initLineCharData(dataLine);
        lineCharData.setLines(dataLine);
        comboLineColumnChartData.setLineChartData(lineCharData);

        //為組合圖設置柱形圖數據
        List<Column> dataColumn = initColumnLine();
        ColumnChartData columnChartData = initColumnCharData(dataColumn);
        columnChartData.setColumns(dataColumn);
        comboLineColumnChartData.setColumnChartData(columnChartData);

        comboLineColumnChartData.setValueLabelsTextColor(Color.BLACK);// 設置數據文字顏色
        comboLineColumnChartData.setValueLabelTextSize(25);// 設置數據文字大小
        comboLineColumnChartData.setValueLabelTypeface(Typeface.MONOSPACE);// 設置數據文字樣式

        Axis axisX = new Axis().setHasLines(true);
        Axis axisY = new Axis().setHasLines(true);
        axisX.setValues(axisValues);
        axisY.setTextColor(Color.BLACK);
        axisY.setTextColor(Color.BLACK);
        comboLineColumnChartData.setAxisYLeft(axisY);
        comboLineColumnChartData.setAxisXBottom(axisX);
        //comboLineColumnChartData.setAxisYRight(axisYRight);//設置右邊顯示的軸
        //comboLineColumnChartData.setAxisXTop(axisXTop);//設置頂部顯示的軸
        comboChart.setComboLineColumnChartData(comboLineColumnChartData);//為組合圖添加數據

        Viewport viewport = initViewPort();
        comboChart.setMaximumViewport(viewport);
        comboChart.setCurrentViewport(viewport);
    }

    private Viewport initViewPort() {
        Viewport viewport = new Viewport();
        viewport.top = 60;
        viewport.bottom = 0;
        viewport.left = -2;
        viewport.right = 20;

        return viewport;
    }

    public static ComboLineColumnChartView getComboLineColumnChartView() {
        return comboChart;
    }
}

覺得有用的話別忘了評論點個贊啥的，沒用就忽略