【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式に書き換え  
        }  
    ]  
}  

実行してみると・・・

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

あとがき

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

記事が少しでもいいなと思ったらクラップを送ってみよう!
72
+1
JakartaEEやらの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする