BETA

【JavaEE】Chart.jsを使ったはなし

投稿日:2018-11-19
最終更新:2019-08-11

きっかけ

グラフを挿入したいと思ってPrimefacesを確認したけど、なんかレイアウトがいまいちだったので他に使えるものはないかと思って調べてみると、よく使われてていい感じのレイアウトにしてくれる「Chart.js」を見つけてじゃあこれを使ってみようと思ったのがきっかけ

導入までの流れ

今回はあくまで、JakartaEEで使ったって話がメインなので、Chart.jsの使い方まで言及してません。 ( メインどころも全然書いてないけど・・・)

普通は↓のような記述をするらしいので、わざわざこれだけのためにJavaScriptで作りこまないとダメかー(´・ω・`)
と思っていたのですが・・・

//項目用の配列を定義  
var label_1 = [];  
var data_1 = [];  

var data = {  
    labels : label_1,  
    datasets : [  
        {  
            type: 'line',  
            backgroundColor: : "#0a50a1",  
            borderColor: : "#0a50a1",  
            data : data_1  
        }  
    ]  
}  

そうだ! ぼくらにはEL式があるじゃないか!( ・`ω・´)
ということで↓のように書き換えて・・・

var data = {  
    labels : [#{chart.getLabel()}],         //EL式に書き換え  
    datasets : [  
        {  
            type: 'line',  
            backgroundColor: : "#0a50a1",  
            borderColor: : "#0a50a1",  
            data : [#{chart.getData()}]     //EL式に書き換え  
        }  
    ]  
}  

実行してみると・・・

ちゃんと表示できたー(∩´∀`)∩

あとがき

実際に使うにはもっと工夫しないといけないかもしれないけど、色々と応用が利きそう。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

ぽんこつなりにがんばったことをつらつらと書き留める

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!