【備忘録】JavaFXで8種より多いシンボルを LineChart に表示する

R を使ってある事象をチャートで説明したところ、なんと（社内の）担当者が R のスクリプトを理解できないということが判明し、仕方なく JavaFX で同じようなプロットを作ることになりました。R ではスマートに計算できるベクトルの計算が、Java ではうまく行かず冗長になりますが、それでもやってやれないことはないと取り掛かったのですが、思わぬところで行き詰まってしまいました。この作業では珍しくシンボルの数が多いのですが、今までのやり方では8種までしかシンボルの色などを設定できなかったのです。

下記は無事この問題が解決した後のプロット例です。

従来は下記のように CSS ファイルで、.default-color0.chart-... の太字の数字の部分を順番に 0, 1, 2, ... と増やして対応させていましたが、この方法だと 7 までしか使えません。

.default-color0.chart-series-line { ... }
.default-color0.chart-line-symbol { ... }
...
...
...

参考サイト [1] によると、.default-color0.chart-... を使わずに、代わりに .series0.chart-... を使うと良いとのことです。下記のようにして 14 種類の線およびシンボルを無事表示されることができました。

リスト：シンボルが多いときの CSS 設定例 

.chart-series-line {
    -fx-stroke-width: 1px;
    -fx-effect: null;
}

.series0.chart-series-line { -fx-stroke: transparent; }
.series0.chart-line-symbol {
    -fx-background-color: #c0c0c0, #c0c0c0;
    -fx-background-radius: 3px;
    -fx-padding: 3px;
}

.series1.chart-legend-item-symbol {
    -fx-background-color: #ff0000;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M0,5 L0,7 L12,7 L12,5 Z";
    -fx-scale-shape: false;
}

.series2.chart-series-line {
    -fx-stroke: #ff0000;
    -fx-stroke-width: 1px;
}
.series2.chart-line-symbol {
    -fx-background-color: #ff0000, #ff0000;
    -fx-background-radius: 0px;
    -fx-padding: 0px;
}
.series2.chart-legend-item-symbol {
    -fx-background-color: #ff0000;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M0,5 L0,7 L12,7 L12,5 Z";
    -fx-scale-shape: false;
}

.series3.chart-series-line { -fx-stroke: transparent; }
.series3.chart-line-symbol {
    -fx-background-color: #008080, #008080;
    -fx-background-radius: 2px;
    -fx-padding: 2px;
}
.series4.chart-series-line { -fx-stroke: transparent; }
.series4.chart-line-symbol {
    -fx-background-color: #008080, #008080;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,
        10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
}

.series5.chart-series-line { -fx-stroke: transparent; }
.series5.chart-line-symbol {
    -fx-background-color: #0040c0, #0040c0;
    -fx-background-radius: 2px;
    -fx-padding: 2px;
}
.series6.chart-series-line { -fx-stroke: transparent; }
.series6.chart-line-symbol {
    -fx-background-color: #0040c0, #0040c0;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,
        10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
}

.series7.chart-series-line { -fx-stroke: transparent; }
.series7.chart-line-symbol {
    -fx-background-color: #0000ff, #0000ff;
    -fx-background-radius: 2px;
    -fx-padding: 2px;
}
.series8.chart-series-line { -fx-stroke: transparent; }
.series8.chart-line-symbol {
    -fx-background-color: #0000ff, #0000ff;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,
        10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
}

.series9.chart-series-line { -fx-stroke: transparent; }
.series9.chart-line-symbol {
    -fx-background-color: #4000c0, #4000c0;
    -fx-background-radius: 2px;
    -fx-padding: 2px;
}
.series10.chart-series-line { -fx-stroke: transparent; }
.series10.chart-line-symbol {
    -fx-background-color: #4000c0, #4000c0;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,
        10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
}

.series11.chart-series-line { -fx-stroke: transparent; }
.series11.chart-line-symbol {
    -fx-background-color: #800080, #800080;
    -fx-background-radius: 2px;
    -fx-padding: 2px;
}
.series12.chart-series-line { -fx-stroke: transparent; }
.series12.chart-line-symbol {
    -fx-background-color: #800080, #800080;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,
        10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
}

.series13.chart-series-line { -fx-stroke: transparent; }
.series13.chart-line-symbol {
    -fx-background-color: #ff0000, #ff0000;
    -fx-background-radius: 4px;
    -fx-padding: 4px;
}

JavaFX に書き直したからと言って、くだんの担当者に理解してもらえるかどうかはあやしいのですが、このことで出来なかったことが出来るようになったので良しとし、備忘録としました。

参考サイト

1. java - setting more than eight colors for data series in JavaFX ScatterChart - Stack Overflow
2. bitWalk's: JavaFX: LineChart を使いこなそう (3)

 

にほんブログ村