CSSでグラフの色が設定できるのはいいですね。
あとから、簡単に変えれる！
StackedChartをやるつもりでしたがひとまず、１系列で。
#追記:ソースがうまく貼れないので、
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;
}
