ゲージメーターチャート

2021年3月15日拡張チャートコレクション

このチャートは、パーセンテージデータをメーター表示します。与えられたデータを基にメーターチャートを描画します。
指標となる数値の比率を表示するようなシーンで使用します。

単数表示
ストライプ
アーチ状
複数表示
半円

拡張プロパティを追加設定することで、形状や色などの指定が可能です。

拡張プロパティの詳細については、後述のプロパティ設定を参照してください。

拡張チャート概要

チャート名jp.co.ashisuto.gaugemeter
バージョン1.0.1
最新公開日2021年2月16日
変更履歴2020.11.06 初期リリース
2021.02.16 背景色設定プロパティ追加
備考

必要なデータ

項目値型説明
パーセンテージ数値パーセンテージ表示する値
数値指定数値パーセンテージデータではなく、数値データを渡す場合の値
最大値指定数値数値指定する場合の最大値
ラベル文字列ゲージメーター内に表示するテキスト値
パーセントデータ
置換テキスト
文字列ゲージメーター内に表示するパーセンテージ値を置換して表示する値

複数のデータが渡されても、データの先頭データのみ使用して描画します。複数表示したい場合は、複数グラフを使用してください。


プロパティ設定

必要に応じて設定してください。

"min": "20",
"size": "200",
"prepend": "",
"append": "%",
"theme": "Red-Gold-Green",
"color": "#2c94e0",
"back": "#ccc",
"width": "4",
"style": "Full",
"stripe": "0",
"animationstep": "2",
"animate_gauge_colors": "false",
"animate_text_colors": "false",
"label_color": "#888",
"label_size": "0",
"text": "",
"text_color": "",
"text_size": "0",
"fill": "#fff",
"showvalue": "false",
"round": "2",
"flex": "center"
"bgcolor": ""
プロパティ説明

minゲージメーターの最小値を指定
sizeゲージメーターの描画サイズを指定
prependゲージメーター内に表示するパーセンテージ値の前に表示する文字列を指定
appendゲージメーター内に表示するパーセンテージ値の後に表示する文字列を指定
themeゲージメーターの色に使用するテーマを指定(テーマについては後述)
colorゲージメーターのプログレスバー色に使用する色を指定(テーマよりも優先)
backゲージメーターのプログレスバー背景に使用する色を指定
widthゲージメーターのプログレスバー幅を指定
styleゲージメーターのプログレスバー形状を指定
Full:完全な円、Semi:半円、Arch:アーチ状)
animationstepゲージメーターのプログレスバーの描画時のアニメーションステップを指定
animate_gauge_colorsゲージメーターの前景色をテーマに従って循環する設定値を指定
animate_text_colorsゲージメーターのパーセンテージテキストをテーマに従って循環する設定値を指定
label_colorゲージメーター内に表示されるパーセンテージデータ値の色を指定
label_sizeゲージメーター内に表示されるパーセンテージデータ値のサイズを指定
textゲージメーター内に表示されるラベルテキストを指定
text_colorゲージメーター内に表示されるラベルテキストの色を指定
text_sizeゲージメーター内に表示されるラベルテキストのサイズを指定
fillゲージメーター内のテキストが表示される背景領域の色を指定
showvalueゲージメーター内の数値をパーセントデータ値ではなく数値を表示する設定値を指定
roundゲージメーター内に表示するパーセンテージデータ値の小数点部のまるめ桁数を指定
flexゲージメーターのレスポンシブ配置を指定
bgcolorゲージメーターを配置するキャンバスの色を指定

各サイズに関しては、チャート内で自動調整されることがあります。

グラフ作成後、プロシジャをテキストで編集し、「*GRAPH_JS_FINAL」ブロック内へ追記してください。他要素に追加する場合は、「,」で連結してください。

"extensions": {"jp.co.ashisuto.gaugemeter":{
	"size": "200",
	"style": "Semi",
	"width": "10",
}}

テーマ

右記のいずれかを指定Red-Gold-Green
Green-Gold-Red
Red-Green
Green-Red
DarkBlue-LightBlue
LightBlue-DarkBlue
DarkRed-LightRed
LightRed-DarkRed
DarkGreen-LightGreen
LightGreen-DarkGreen
DarkGold-LightGold
LightGold-DarkGold
White
Black

テキスト編集した後に、InfoAssistでプロシジャを開くと、左記のメッセージが表示されますが、InfoAssistで上書き保存すると、次回より表示されなくなります。

ダウンロード

ゲージメーターチャート
拡張チャートについての注意事項

本サイトで提供されている拡張チャートは、お客様固有の問題に対し適切、または正確であるかどうか十分検証されていません。
万一、正常に動作しない・期待通りではないなどといった場合においても、いかなる保証も責任も負いかねますので、あらかじめご了承ください。また掲載情報は不定期に変更されることがあります。

また、JavaScript、CSS、HTML など拡張チャート内の記述に関する問い合わせは、株式会社アシストのサポートセンターでは受け付けることができません。