2014/07/14

JavaFXでグラフ描くよ

CSSでグラフの色が設定できるのはいいですね。
あとから、簡単に変えれる!
StackedChartをやるつもりでしたがひとまず、1系列で。
#追記:ソースがうまく貼れないので、githubにあげてみた

まず、画面が

<BorderPane id="_root" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxsample2.ChartController">
    <stylesheets>   
        <URL value="@chart.css" />
    </stylesheets>
    <top>
            <MenuBar id="menuBer" layoutY="2.0">
                    <menus>
                            <Menu mnemonicParsing="false" text="メニュー" />
                    </menus>
            </MenuBar>
    </top>
    <center>
        <VBox>
        <StackedBarChart fx:id="chartApp" BorderPane.alignment="CENTER">
            <xAxis>
                    <CategoryAxis fx:id="xAxis1" side="BOTTOM" />
            </xAxis>
            <yAxis>
                    <NumberAxis fx:id="yAxis1" side="LEFT" />
            </yAxis>
    </StackedBarChart>
        <StackedBarChart fx:id="chartApp2" BorderPane.alignment="CENTER">
            <xAxis>
                    <CategoryAxis fx:id="xAxis2" side="BOTTOM" />
            </xAxis>
            <yAxis>
                    <NumberAxis fx:id="yAxis2" side="LEFT" />
            </yAxis>
    </StackedBarChart>
        </VBox>
    </center>
</BorderPane>

コントローラが
public class ChartController extends BaseController  implements Initializable{
    @FXML private NumberAxis yAxis1;
    @FXML private NumberAxis yAxis2;
    @FXML private CategoryAxis xAxis1;
    @FXML private CategoryAxis xAxis2;
    @FXML private StackedBarChart chartApp;
    @FXML private StackedBarChart chartApp2;
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
        XYChart.Series series1 = new XYChart.Series();
        XYChart.Series series2 = new XYChart.Series();

        xAxis1.setLabel("Time");
        xAxis2.setLabel("Time");
        Calendar cal1 = Calendar.getInstance();
        SimpleDateFormat sdf = new SimpleDateFormat("hh:mm:ss");//"hh:mm:ss SSS"
        cal1.set(2016, 6, 30);
        Random rnd = new Random();
        ArrayList datelist = new ArrayList();
        for(int i=0; i< 20; i++){
         cal1.add(Calendar.SECOND, 1);
         String label = sdf.format(cal1.getTime());
         datelist.add(label);
        }
        xAxis1.setCategories(FXCollections.observableArrayList(datelist));
        xAxis2.setCategories(FXCollections.observableArrayList(datelist));
        
        yAxis1.setLabel("M bps");
        yAxis2.setLabel("なんか単位");
        series1.setName("なんとかチャート");
        series2.setName("なんかのグラフ");
        for(int i=0; i< 20; i++){
            float val = rnd.nextInt(100); 
            series1.getData().add(new XYChart.Data(datelist.get(i), val));
            series2.getData().add(new XYChart.Data(datelist.get(i), val%20));
        }
        chartApp.getData().addAll(series1);
        chartApp2.getData().addAll(series2);
    }
}



でCSSがこんな感じ
.chart {
    -fx-category-gap:0.0px;
    -fx-background-color: -fx-box-border, #f5f5f5;
    -fx-background-insets: 0, 1;
}
#chartApp .default-color0.chart-bar{
    -fx-stroke-width: 0;
    -fx-background-radius: 0;
    -fx-background-color: rgba(50,180,230,0.6);
    -fx-background-position: left center;
}
#chartApp2 .default-color0.chart-bar{
    -fx-stroke-width: 0;
    -fx-background-radius: 0;
    -fx-background-color: rgba(180,230,50,0.6);
    -fx-background-position: left center;
}



0 件のコメント:

コメントを投稿