No More Codes: 磁場紀錄器 - 使用aChartEngine繪圖

最近做了一個Android App，用手機的磁場感測器做地震預測的研究，其中使用到aChartEngine (https://github.com/ddanny/achartengine) 來畫訊號的圖形。搜尋網路上的資料發現，只找到全螢幕的demo code，實作時卻需要將圖形顯示在某個畫面區域，以下解說這個App如何簡單的做到這件事。

先在畫面上要放圖形的區域，建立一個 id 為 chartLayout 的空白Layout：

要建立一個aChartEngine圖形，要做兩件事：(1)準備繪圖用的資料dataset；(2)產生繪圖用的View。

這個 App 將資料管理放在 DataManager 類別，使用的是 XYMultipleSeriesDataset，地磁感測資料放在 serialX、serialY 與 serialZ，另外將計算的向量長度放在 serialV：

XYSeries seriesX, seriesY, seriesZ, seriesV;

XYMultipleSeriesDataset dataset;

建構 dataset：

private void buildDataset()
{
    seriesX = new XYSeries("X");
    seriesY = new XYSeries("Y");
    seriesZ = new XYSeries("Z");
    seriesV = new XYSeries("V");
    seriesTime = new ArrayList<Date>();

    dataset = new XYMultipleSeriesDataset();  
    dataset.addSeries(seriesX);
    dataset.addSeries(seriesY);
    dataset.addSeries(seriesZ);
    dataset.addSeries(seriesV);
}

繪圖的部分放在SensorScope類別，產生繪圖用的render：

XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();

…...

private void buildRender() // render builder
 {
    int[] colors = new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.BLACK };// line colors
    for (int i = 0; i < numberOfLines; i++) {
        XYSeriesRenderer r = new XYSeriesRenderer();
        r.setColor(colors[i]);
        r.setPointStyle(org.achartengine.chart.PointStyle.CIRCLE);
        r.setFillPoints(true); // fill
        renderer.addSeriesRenderer(r); //convert series data to a line
    } 

    renderer.setChartTitleTextSize(48);
    renderer.setChartTitle( "Sensor Scope");

…...

}

重點來了，用 ChartFactory 產生 View加到 chartLayout中：

private void buildChartView()
{
    // add chart view to layout
    chartView = ChartFactory.getLineChartView(context, dataManager.dataset, renderer);
    LinearLayout chartLayout = (LinearLayout) rootView.findViewById(R.id.chartLayout);
    try{
        chartLayout.addView(chartView);
      } catch (Exception e){
        e.printStackTrace();
    }
}