あとから、簡単に変えれる!
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.Seriesseries1 = 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 件のコメント:
コメントを投稿