台風で防災アプリから初めて、川の氾濫危険水位のアラートが鳴って、標高(Elevation)が気になった。
いろんな場所の標高が知りたかったので、ちょっと、
「Maps JavaScript API」の「Elevation Service」を使ってみたよ。
⇒ 右側のガジェット部分の「標高(Elevation)」でポイントをクリックすると、その場所の標高が出ます。
全画面でやってみるとやりやすいかも。
ちなみに実家は、2.8メートルしかなかった。家の前が川だし。。
別タブで表示
scatterbrain
2015/08/14
Windows8 / Windows10 アプリの画面がもやっと、ぼやける件
たとえば、chromeとか、Fiddlerとか、Evernoteとかがぼやけていました。
Windows8 / Windows10 には、ディスプレイのDPIに合わせて、アプリケーションの画面をスケーリングする仕組みがあって、
アプリケーション自身が、高DPIディスプレイのエクスペリエンスを最適化するために、
使用されているディスプレイの DPI を検出し、グラフィック要素、テキスト、画面レイアウトをそれに合わせて拡大縮小する必要があるので、そのように実装せよということらしい。
それをやってないアプリは、もやっとぼやけるかもねということらしい。
で、ぼやけるアプリは、その仕組みに従って作られていないので、
その機能を無効にしたら、はっきりする。
参考
一部のデスクトップ アプリケーションが高 DPI ディスプレイでぼやけて表示される
やり方
アプリケーションのショートカットやexeの右クリックプロパティから[互換性]タブ選択で、
[高DPI設定では画面のスケーリングを無効にする]のチェックと付ける。
アプリケーション再起動。
設定前(もやっとしてる)
設定後(はっきりしてる)
すっきりした。
Windows8 / Windows10 には、ディスプレイのDPIに合わせて、アプリケーションの画面をスケーリングする仕組みがあって、
アプリケーション自身が、高DPIディスプレイのエクスペリエンスを最適化するために、
使用されているディスプレイの DPI を検出し、グラフィック要素、テキスト、画面レイアウトをそれに合わせて拡大縮小する必要があるので、そのように実装せよということらしい。
それをやってないアプリは、もやっとぼやけるかもねということらしい。
で、ぼやけるアプリは、その仕組みに従って作られていないので、
その機能を無効にしたら、はっきりする。
参考
一部のデスクトップ アプリケーションが高 DPI ディスプレイでぼやけて表示される
やり方
アプリケーションのショートカットやexeの右クリックプロパティから[互換性]タブ選択で、
[高DPI設定では画面のスケーリングを無効にする]のチェックと付ける。
アプリケーション再起動。
設定前(もやっとしてる)
すっきりした。
2014/11/23
Windows8でAndroid5.0(lolipop)実機デバッグ
とってもハマったのでメモ
[androidsdkフォルダ]/extras/google/usb_driver 配下の
android_winusb.infを編集する
[Google.NTx86]のまとまりと[Google.NTamd64]のまとまりの一番下に
;Google Nexus 5
%SingleBootLoaderInterface% = USB_Install, USB\VID_18D1&PID_4EE2
%CompositeAdbInterface% = USB_Install, USB\VID_18D1&PID_4EE2&REV_0232&MI_01
を追記して、デバイスマネージャからドライバの更新すればいい
だけなんだけど、なかなかできなかった。
メッセージでググって参考にしたサイトは以下。
(参考)Windows 8でAndroidのADB用USBドライバーをインストールする方法
完全にシャットダウンしてブート後オプションメニューを表示するときは
shutdown /r /o /t 0
(参考)Windows8の shutdown コマンドのパラメーター
[androidsdkフォルダ]/extras/google/usb_driver 配下の
android_winusb.infを編集する
[Google.NTx86]のまとまりと[Google.NTamd64]のまとまりの一番下に
;Google Nexus 5
%SingleBootLoaderInterface% = USB_Install, USB\VID_18D1&PID_4EE2
%CompositeAdbInterface% = USB_Install, USB\VID_18D1&PID_4EE2&REV_0232&MI_01
を追記して、デバイスマネージャからドライバの更新すればいい
だけなんだけど、なかなかできなかった。
「指定されたカタログ ファイルにファイルのハッシュがありません。ファイルが壊れているか、改ざんされた可能性があります。」とかになって、、
メッセージでググって参考にしたサイトは以下。
(参考)Windows 8でAndroidのADB用USBドライバーをインストールする方法
完全にシャットダウンしてブート後オプションメニューを表示するときは
shutdown /r /o /t 0
(参考)Windows8の shutdown コマンドのパラメーター
2014/10/13
正多角形の作図
m/n角形を作図するよ。
m:角の数
n:何回転してもとにもどるかの数
n周で、m回角を曲がるような多角形という感じだと思っている。
#ちょっと強引だけど、1周(360度)するのにm/n回角を曲がるような多角形と思っている。
例えば、
3角形は、3つ角があって、1周して元の点にもどる。
このとき、1つの角で向きを変える角度(外角)は
360÷3=120度
5/2角形は、5個角があって、2周して元の点にもどる。
このとき、1つの角で向きを変える角度(外角)は
360×2÷5=144度
ということで、ちゃんと144度ずつ曲がったら★になるのだ!
せっかく描いたし、やり方忘れるからメモっておこう。
点0から点1は辺の長さ100とかで描くよね。
点2の座標が知りたいわけだけど、
点1'なる同じ長さだけ延長した点を外角分だけ回転したやつだから、
点2の座標 X[2],Y[2]は、点1を原点として考えると
X[2] = 100*cos(0-144)
Y[2] = 100*sin(0-144)
になるよ。0度から-144度に回転しているからね。極座標ね。
# 極座標(r,θ)は、x=r*cosθ,y=r*sinθだった
だから一個前の点1 の座標X[1],Y[1]で表すと、
X[2] = X[1] + 100*cos(0-144)
Y[2] = Y[1] + 100*sin(0-144)
で、次
点3の座標 X[3],Y[3]は、点2を原点として、点2'をまた-144度回転してるから、
X[3] = X[2] + 100*cos(-144-144)
Y[3] = Y[2] + 100*sin(-144-144)
だね。
ということで帰納法で
deg[i]= deg[i-1]-144;
X[i]=X[i-1] + 100 * cos(deg[i-1]-144)
Y[i]=Y[i-1] - 100 * sin(deg[i-1]-144)
という感じです。
#ここでY座標は、マイナスにしているのは、
#SVGなる図を描くタグで左上が原点で、Y座標は↓がプラス方向なので。
SVGで描いたサンプルはここ。
m:角の数
n:何回転してもとにもどるかの数
m/n角形
m/n角形は、その多角形の上を歩くとして、n周で、m回角を曲がるような多角形という感じだと思っている。
#ちょっと強引だけど、1周(360度)するのにm/n回角を曲がるような多角形と思っている。
- 3角形
例えば、
3角形は、3つ角があって、1周して元の点にもどる。
このとき、1つの角で向きを変える角度(外角)は
360÷3=120度
- 5/2角形∽5/3角形
5/2角形は、5個角があって、2周して元の点にもどる。
このとき、1つの角で向きを変える角度(外角)は
360×2÷5=144度
ということで、ちゃんと144度ずつ曲がったら★になるのだ!
作図
5/2角形(5/3でもいいけど)を分度器ないけどきっちり描きたかった。せっかく描いたし、やり方忘れるからメモっておこう。
点0から点1は辺の長さ100とかで描くよね。
点2の座標が知りたいわけだけど、
点1'なる同じ長さだけ延長した点を外角分だけ回転したやつだから、
点2の座標 X[2],Y[2]は、点1を原点として考えると
X[2] = 100*cos(0-144)
Y[2] = 100*sin(0-144)
になるよ。0度から-144度に回転しているからね。極座標ね。
# 極座標(r,θ)は、x=r*cosθ,y=r*sinθだった
だから一個前の点1 の座標X[1],Y[1]で表すと、
X[2] = X[1] + 100*cos(0-144)
Y[2] = Y[1] + 100*sin(0-144)
で、次
点3の座標 X[3],Y[3]は、点2を原点として、点2'をまた-144度回転してるから、
X[3] = X[2] + 100*cos(-144-144)
Y[3] = Y[2] + 100*sin(-144-144)
だね。
ということで帰納法で
deg[i]= deg[i-1]-144;
X[i]=X[i-1] + 100 * cos(deg[i-1]-144)
Y[i]=Y[i-1] - 100 * sin(deg[i-1]-144)
という感じです。
#ここでY座標は、マイナスにしているのは、
#SVGなる図を描くタグで左上が原点で、Y座標は↓がプラス方向なので。
SVGで描いたサンプルはここ。
2014/10/05
業務システム向き WEB UI について気をつけること
あんまり、画面系やってないから調べないとわからんね。
これが参考になるのでは!
IMEモードの設定とかは、使っている立場だとけっこううざいんだけど、
やっぱりやった方がいいのだなぁ。
これが参考になった。
<目のつかれ>
1.眼球の動き
動きを少なくするために
→配置に一定のルールを設ける(左上から右下が暗黙のルール)
→関連するものは近くに配置するとか?
2.情報の認識率
ピント合わせを少なくするために
→例えば、ポップアップWindow以外の後ろの画面にマスクをかける(FLEXみたいに)とか
→注目してほしいところに注目してくれるようにするってこと?難しいなぁ
→似たようなものを並べて発見しやすくするとか?
3.光量
瞳孔のコントロールを少なくするために
→ローコントラスト(白黒が最悪)
→チラチラしないってことかな、色を統一すればいいのかな?
→標準反射率は人肌(反射率18%)でwなるほどと思いました。
らしい!勉強になります。
とりあえず、人肌色についてもうちょっと調べてみた。
反射率18の色を探そうと思っていろいろググってみたんだけど、
よくある、colorhexaとかのサイトには、反射率なる項目が無い( ;∀;)
で調べたら、
ここのサイトにLight Reflectance Value (LRV) なる一覧があったよ。
LRVの一覧がこれ↓
ColorEssentials LRV Spreadsheet
#これなんだけど、ちょっと、HTML colorとのマッピングができないので、
#スプレッドシートにまとめてみたよ→color-LRV
で、とりあえず18から24くらいだとこんな感じ
業務向けについて
UI/UXの観点から見た業務系ツールを開発するときに気をつけたい20項目これが参考になるのでは!
引用などに気をつけて、デザインしよう!
- データ削除のConfirm
- ページング、検索結果件数、表示件数
- 並び替え
- 部分一致、前方一致の明記
- カタカナ英語を使わない(NEXT→次のページ)
- 用語の統一
- ×検索 ○検索する
- 操作できる部分でポインターの切り替え
- 余白
- クロスブラウザ対策
- IMEモードの設定
- メニューは全ページ共通のものをつける
- 軽く
- ログアウト
IMEモードの設定とかは、使っている立場だとけっこううざいんだけど、
やっぱりやった方がいいのだなぁ。
見た目について
目に優しいUIデザイン(1)これが参考になった。
<目のつかれ>
1.眼球の動き
動きを少なくするために
→配置に一定のルールを設ける(左上から右下が暗黙のルール)
→関連するものは近くに配置するとか?
2.情報の認識率
ピント合わせを少なくするために
→例えば、ポップアップWindow以外の後ろの画面にマスクをかける(FLEXみたいに)とか
→注目してほしいところに注目してくれるようにするってこと?難しいなぁ
→似たようなものを並べて発見しやすくするとか?
3.光量
瞳孔のコントロールを少なくするために
→ローコントラスト(白黒が最悪)
→チラチラしないってことかな、色を統一すればいいのかな?
→標準反射率は人肌(反射率18%)でwなるほどと思いました。
らしい!勉強になります。
とりあえず、人肌色についてもうちょっと調べてみた。
反射率18の色を探そうと思っていろいろググってみたんだけど、
よくある、colorhexaとかのサイトには、反射率なる項目が無い( ;∀;)
で調べたら、
ここのサイトにLight Reflectance Value (LRV) なる一覧があったよ。
LRVの一覧がこれ↓
ColorEssentials LRV Spreadsheet
#これなんだけど、ちょっと、HTML colorとのマッピングができないので、
#スプレッドシートにまとめてみたよ→color-LRV
で、とりあえず18から24くらいだとこんな感じ
LRV Value = 18~24
結構暗いね。
あと、黄色系が無い!
黄色系は、反射率が70~80あるみたいで、目にやさしくないことがわかった。
オレンジに近い色でも60くらい。
んー黄色はよく使うけどなぁ。
Excel2007か2010からテーマの色に黄色が無いなーっと思ってたんだけど、
目にやさしくないからなのか!
まあ、こんな感じで、上にあげたようなモヤッとした色を採用すればいいのかなw
Number | Color Name | LRV Values | HTML color |
---|---|---|---|
0039 | Mandalay Road | 19 | #A46952 |
0045 | Sizzling Hot | 21 | #A67160 |
0051 | Caramel Candy | 24 | #B57866 |
0052 | Spiced Carrot | 19 | #A86A57 |
0058 | Angelic Choir | 22 | #B86D64 |
0064 | Lord Baltimore | 22 | #B86E69 |
0065 | Poppy Prose | 20 | #AF6661 |
0073 | Corazon | 19 | #A06C69 |
0080 | Abra Cadabra | 18 | #9A696C |
0087 | Cinnapink | 20 | #A76C76 |
0092 | Fresh Day | 24 | #B2777A |
0093 | Herald of Spring | 20 | #A86B6D |
0114 | Montrose Rose | 20 | #A07079 |
0120 | Summer's Eve | 23 | #AB766F |
0129 | Arrowhead | 19 | #936F64 |
0135 | Emerging Leaf | 24 | #9C7F74 |
0150 | Temptation | 20 | #987464 |
0157 | Dodge Pole | 23 | #A6795C |
0165 | Cavern Sand | 21 | #9A775C |
0171 | Golden Glove | 23 | #A37C5B |
0178 | Cupcake | 20 | #90765C |
0185 | Noble Crown | 20 | #907962 |
0191 | Dusty Path | 22 | #917D69 |
0199 | Sandy Shoes | 20 | #887B69 |
0206 | Thatched Cottage | 21 | #877D6C |
0213 | Coastal Fog | 20 | #84796C |
0219 | Camel's Hump | 21 | #877C6D |
0227 | Moonscape | 23 | #90836F |
0234 | Industrial Strength | 22 | #8B7F6A |
0241 | Prince Paris | 24 | #A17F5D |
0242 | Rare Happening | 18 | #92714F |
0256 | Crazy Horse | 24 | #A87E52 |
0263 | Country Charm | 19 | #92734F |
0269 | Sahara Wind | 18 | #90714A |
0277 | Golden Freesia | 19 | #8C7554 |
0291 | Rutherford | 20 | #917956 |
0298 | Brocade | 20 | #90784F |
0312 | September Gold | 21 | #927C50 |
0319 | Herald's Trumpet | 20 | #8E7A52 |
0325 | Welcome Home | 23 | #94825A |
0326 | Bambino | 18 | #83734E |
0339 | Ceramic Pot | 24 | #93866D |
0360 | Land Before Time | 24 | #908565 |
0367 | Chocolate Velvet | 20 | #857B5C |
0381 | Sonata | 21 | #868065 |
0396 | Wing Man | 18 | #7E7646 |
0403 | Tropical Twist | 21 | #897F4D |
0416 | Taffeta Sheen | 23 | #868766 |
0429 | Pendula Garden | 23 | #81876C |
0437 | Bowling Green | 20 | #788068 |
0458 | Malarca | 22 | #778575 |
0465 | Earthen Cheer | 20 | #6F8076 |
0479 | Stairway to Heaven | 18 | #6F7874 |
0486 | Paradise City | 18 | #67797A |
0492 | Polar Pond | 20 | #72807F |
0506 | Ocean Storms | 23 | #778692 |
0513 | Backwater | 18 | #70767E |
0520 | Slate Tint | 23 | #818590 |
0534 | Subtle Shadow | 24 | #858787 |
0542 | Captain Nemo | 24 | #878686 |
0549 | Emu | 18 | #7A7473 |
0555 | Ocean Frigate | 21 | #817C7D |
0563 | Vigilant | 21 | #867F74 |
0569 | Fireplace Mantel | 22 | #878074 |
0576 | Stormy Weather | 19 | #7C786D |
0583 | Billowing Smoke | 18 | #747770 |
0590 | Madonna Blue | 20 | #687C9C |
0591 | Blue Jacket | 18 | #627697 |
0598 | Caribbean Current | 20 | #617DAC |
0605 | Capri Isle | 18 | #5974B4 |
0612 | Parkwater | 20 | #547CBC |
0626 | Blue Depths | 18 | #65778D |
0640 | Skylla | 20 | #397EC3 |
0647 | Zenith | 20 | #567FA3 |
0654 | Peninsula | 19 | #4A80A1 |
0668 | Wish Upon a Star | 19 | #4E828D |
0675 | Blue Bliss | 24 | #0096AC |
0689 | Atmosphere | 21 | #478887 |
0703 | Mountain Meadow | 24 | #6E8D80 |
0710 | On the Nile | 24 | #55937A |
0725 | Melbourne | 19 | #578253 |
0760 | Green Knoll | 21 | #6D8654 |
0767 | Golf Day | 23 | #639149 |
0788 | Green Glow | 22 | #7E8547 |
0886 | Gold Estate | 23 | #9C814C |
0893 | Rich and Rare | 22 | #9B7D4E |
1005 | Flickering Flame | 21 | #AA734F |
1012 | Hampton Beach | 18 | #A16947 |
1019 | Orange Ballad | 23 | #B77449 |
1039 | Pretty Parasol | 19 | #AE674B |
1067 | Sweet Baby Rose | 19 | #BE594B |
1068 | Best of the Bunch | 19 | #BE5E4C |
1081 | Endless Possibilities | 22 | #DF4F47 |
1100 | Heart to Heart | 24 | #D56169 |
1101 | Mullen Pink | 18 | #C74B4A |
1144 | Temptress | 21 | #BF6471 |
1165 | Pink Parade | 24 | #B571A6 |
1171 | Teen Queen | 24 | #A9799D |
1193 | Crown Jewels | 22 | #9A73B0 |
1200 | Felicia | 22 | #957896 |
1206 | Screen Gem | 24 | #A07C9B |
1221 | Charming Violet | 20 | #907683 |
1249 | Purple Spire | 19 | #7974A0 |
1256 | Plum Preserve | 21 | #8276AC |
1263 | Medieval | 19 | #7273B3 |
1270 | Wind Star | 21 | #727AB8 |
1277 | Regal Azure | 21 | #737BB2 |
1291 | Dancing in the Spring | 20 | #82798D |
1298 | Queen of Sheba | 22 | #877B9B |
1305 | Victorian Violet | 18 | #82727D |
1312 | Southern Belle | 19 | #837382 |
1319 | Overlook | 18 | #717481 |
結構暗いね。
あと、黄色系が無い!
黄色系は、反射率が70~80あるみたいで、目にやさしくないことがわかった。
オレンジに近い色でも60くらい。
んー黄色はよく使うけどなぁ。
Excel2007か2010からテーマの色に黄色が無いなーっと思ってたんだけど、
目にやさしくないからなのか!
まあ、こんな感じで、上にあげたようなモヤッとした色を採用すればいいのかなw
2014/07/14
Android携帯の着信音とアラーム音楽を変えよう
もはや、Androidの携帯で音楽を聞くときは、GooglePlayMusicを使うので
携帯に音楽をコピーしなくてもよくなったけど。
着信音とかめざましのアラーム音楽とかを変えたい!という方のために
簡単に説明しようと思います。
mp3cutというサイトで、とても直感的に、編集できます。
http://mp3cut.net/
どうぞ。
携帯側で接続を許可すると、パソコンは、携帯を認識します。
[フォルダを開いてファイルを表示]を選択します。
この画面が出てこない場合は、[マイコンピュータ]から携帯が接続されている
ドライブ(ディスク)を選択して表示します。
私は、『コンピューター\Nexus 5\内部ストレージ\media\audio\ringtones』に入れてます。
ここで、
着信音が『ringtones』で、
めざましが『alarms』です。
べつに、場所(階層)はどこでもいいのですが、フォルダ名が重要です。
フォルダは、右クリックメニュー『新規フォルダー』で作って名前をとにかくRingtonesとAlarms
左がAndroidに作ったRingtonesフォルダで、右がパソコンの音楽が入っているフォルダです。
まず、着信音から
[設定]>[音]>[着信音]ですかね?機種によって違うんですよね。
次にアラーム
ワーイできた!
ちなみに、携帯にすでに音楽いっぱい入ってるし(´・ω・`)っていうひとは、
いけてるファイルエクスプローラ(ESファイルエクスプローラとか?)あれば、
音を設定するときに、起動してくれるから、直接指定できるね(´・ω・`)
携帯に音楽をコピーしなくてもよくなったけど。
着信音とかめざましのアラーム音楽とかを変えたい!という方のために
簡単に説明しようと思います。
MP3を編集する?
まず、音楽をイケてる出だしにしたいよね。mp3cutというサイトで、とても直感的に、編集できます。
http://mp3cut.net/
どうぞ。
パソコンの音楽を携帯に入れるというところからです。
まずパソコンと携帯をUSBでつなぎます
USB(´・ω・`)?
こんなやつです。
繋ぐと、ピコ!と音がする(かバイブかなにか)ので、
携帯を見ると、「メディアデバイスで接続」か何かのお知らせが出ています。
携帯側で接続を許可すると、パソコンは、携帯を認識します。
[フォルダを開いてファイルを表示]を選択します。
この画面が出てこない場合は、[マイコンピュータ]から携帯が接続されている
ドライブ(ディスク)を選択して表示します。
Android側にフォルダを作る
続いて、フォルダーを開いて音楽を入れる場所をつくります。私は、『コンピューター\Nexus 5\内部ストレージ\media\audio\ringtones』に入れてます。
ここで、
着信音が『ringtones』で、
めざましが『alarms』です。
べつに、場所(階層)はどこでもいいのですが、フォルダ名が重要です。
フォルダは、右クリックメニュー『新規フォルダー』で作って名前をとにかくRingtonesとAlarms
PCからAndroidにコピペ
続いて、パソコンの音楽が入っている場所を開きます。左がAndroidに作ったRingtonesフォルダで、右がパソコンの音楽が入っているフォルダです。
携帯で着信音・めざましアラームを今コピーした音楽に変えよう
携帯を見ます。まず、着信音から
[設定]>[音]>[着信音]ですかね?機種によって違うんですよね。
次にアラーム
ワーイできた!
ちなみに、携帯にすでに音楽いっぱい入ってるし(´・ω・`)っていうひとは、
いけてるファイルエクスプローラ(ESファイルエクスプローラとか?)あれば、
音を設定するときに、起動してくれるから、直接指定できるね(´・ω・`)
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>
コントローラが
で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.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; }
登録:
投稿 (Atom)