条件付き書式設定

FlexChart を使用すると、プロットデータに応じた特殊なスタイル設定が必要なトレンドの表示など、プロット要素の全体的な外観をカスタマイズできます。たとえば、ユーザーが表示しようとするトレンドで、プロット要素に特殊なスタイル設定を適用する必要がある場合が考えられます。

設計時にコードをカスタマイズして、プロット領域にトレンドをデザインのように表示できます。この機能を使用すると、ユーザーは単純な系列や一次関数ではなく、複雑な三角関数を表示できます。

次の図は、正弦曲線を表すようにカスタマイズされたプロットを表示する FlexChart コントロールを示しています。

手順 1：データソースの作成

次のコードを ChartPoint.java クラスのデータソースファイルに追加します。

Java	コードのコピー
public class ChartPoint { protected String name; protected double sine; public ChartPoint(double sine) { super(); this.sine = sine; } public double getSine() { return sine; } public void setSine(double sine) { this.sine = sine; } }

Java

コードのコピー

public class ChartPoint
{
        protected String name;
        protected double sine;


        public ChartPoint(double sine)
        {
                super();
                this.sine = sine;
        }
        
        public double getSine()
        {
                return sine;
        }

        public void setSine(double sine)
        {
                this.sine = sine;
        }

}

手順 2：FlexChart コントロールの追加と正弦系列の初期化

ここで、次のコードを MainActivity.java ファイルに追加して FlexChart コントロールと系列要素を初期化し、それらをデータソースとバインドします。

Java	コードのコピー
public class MainActivity extends Activity { private FlexChart mChart; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // ウィジェットの初期化 mChart = (FlexChart) findViewById(R.id.flexchart); // FlexChart の X 軸に対するバインドを設定します mChart.setBindingX("name"); // 系列要素を初期化し、ChartPoint の変数へのバインドを // 設定します final Series seriesSine = new Series(mChart, "Sine Series", "sine"); // 系列をリストに追加します mChart.getSeries().add(seriesSine); // データ/項目のソースを FlexChart で設定 mChart.setItemsSource(getList()); // デフォルト値を FlexChart で設定 // XML レイアウトで設定されたプロパティ // mChart.setChartType(ChartType.LINESYMBOLS); mChart.getAxisY().setMajorUnit(.20); // 以前に呼び出された既存の call() をオーバーライドするハンドラ // 各チャート要素をレンダリングして、必要な要素をカスタマイズします mChart.getPlotElementLoading().addHandler(new IEventHandler() { @Override public void call(Object arg0, Object arg1) { ChartPlotElementEventArgs args = (ChartPlotElementEventArgs) arg1; if (args.dataPoint != null) { double y = (Double) args.dataPoint.yValue; // Y 軸の値に基づいて色の値を変更します int r = y >= 0 ? 255 : (int) (255 * (1 + y)); int b = y < 0 ? 255 : (int) (255 * (1 - y)); int g = (int) ((1 - Math.abs(y)) * 255); args.renderEngine.setFill(Color.argb(255, r, g, b)); } // チャート要素をレンダリングするデフォルト関数 args.defaultRender.execute(); } }, this); } // 2 つの全波の一連の正弦値を作成するメソッド private static ObservableList<ChartPoint> getList() { ObservableList<ChartPoint> list = new ObservableList<ChartPoint>(); int angle = 720; double seriesValue; for (int i = 0; i < angle; i += 5) { seriesValue = Math.sin(Math.toRadians(i)); list.add(new ChartPoint(seriesValue)); } return list; }

Java

コードのコピー

public class MainActivity extends Activity 
{
 
        private FlexChart mChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

 // ウィジェットの初期化
                mChart = (FlexChart) findViewById(R.id.flexchart);

                // FlexChart の X 軸に対するバインドを設定します
                mChart.setBindingX("name");
        
     // 系列要素を初期化し、ChartPoint の変数へのバインドを
                // 設定します
                final Series seriesSine = new Series(mChart, "Sine Series", "sine");

                // 系列をリストに追加します
                mChart.getSeries().add(seriesSine);

                // データ/項目のソースを FlexChart で設定
                mChart.setItemsSource(getList());

                // デフォルト値を FlexChart で設定
                // XML レイアウトで設定されたプロパティ
                // mChart.setChartType(ChartType.LINESYMBOLS);
                mChart.getAxisY().setMajorUnit(.20);

                // 以前に呼び出された既存の call() をオーバーライドするハンドラ
                // 各チャート要素をレンダリングして、必要な要素をカスタマイズします
                mChart.getPlotElementLoading().addHandler(new IEventHandler()
                {
                        @Override
                        public void call(Object arg0, Object arg1)
                        {
                                ChartPlotElementEventArgs args = (ChartPlotElementEventArgs) arg1;

                                if (args.dataPoint != null)
                                {
                                        double y = (Double) args.dataPoint.yValue;

                                        // Y 軸の値に基づいて色の値を変更します
                                        int r = y >= 0 ? 255 : (int) (255 * (1 + y));
                                        int b = y < 0 ? 255 : (int) (255 * (1 - y));
                                        int g = (int) ((1 - Math.abs(y)) * 255);
                                        args.renderEngine.setFill(Color.argb(255, r, g, b));
                                }

                                // チャート要素をレンダリングするデフォルト関数
                                args.defaultRender.execute();
                        }
                }, this);

        }

        // 2 つの全波の一連の正弦値を作成するメソッド
        private static ObservableList<ChartPoint> getList()
        {
                ObservableList<ChartPoint> list = new ObservableList<ChartPoint>();

                int angle = 720;
                double seriesValue;
                for (int i = 0; i < angle; i += 5)
                {
                        seriesValue = Math.sin(Math.toRadians(i));

                        list.add(new ChartPoint(seriesValue));
                }
                return list;
        }

手順 3：プロジェクトの実行

パッケージエクスプローラーで、アプリケーションを右クリックし、［実行］→［Android アプリケーション］をクリックします。