台風で防災アプリから初めて、川の氾濫危険水位のアラートが鳴って、標高(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.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;
}
登録:
コメント (Atom)














