グラフチャートを横棒グラフで比較するスタイルもございますね
直線の範囲指定により比較が容易に確認できることで採用される
種類は多くございます

 

今回はＨＴＭｌ記載のみで記述をシリウスの記事入力画面に
張り付ければ簡単に表示することが出来ます

 

巻末に無料のグラフサービス記事追加してます

 

デモ、範囲の長さ調節や％指定数値はコンテンツに合わせて
あなたがカスタマイズ調整することになります

 

スタイルは
並列表示で比較範囲が色違いで認識しやすいかと思われます

 

また、複雑構成ではなく手順は容易なためすぐにご理解いただけ
掲載可能です

 

例作成グラフ以下に記述コードを配しておりますのでコピーして
シリウスに張り付けカラー変更範囲指定をカスタマイズしてください

 

 

以下例をご覧ください

 

sriusu

 

woldp

 

hatenablog

 

とりあえず3つの横棒ですが　多くを比較するならいくつでも追加できます

 

 

記述コード　コピーしてお使いください
カスタマイズは　記述内コード変更で好みに変えてください

 

sriusu<div style="background-color: #FF0A0A; width: 200px; font-size: 15px;">&nbsp;</div>

 

woldp<div style="background-color: #3C0AFF; width: 100px; font-size: 15px;">&nbsp;</div>

 

hatenablog<div style="background-color: #0AFF15; width: 88px; font-size: 15px;">&nbsp;</div>

 

 

 

 

グラフ背景内にフォント記入

 

sriusu

---

 

woldp

---

 

hatenablog

---

 

 

記述コード

 

sriusu<div style="background-color: #FF0A0A; width: 200px; font-size: 15px;">200%</div>
<hr style="border-bottom:solid 1px #CCC" border="0" />

 

woldp<div style="background-color: #3C0AFF; width: 100px; font-size: 15px;">100%</div>
<hr style="border-bottom:solid 1px #CCC" border="0" />

 

hatenablog<div style="background-color: #0AFF15; width: 88px; font-size: 15px;">88%</div>
<hr style="border-bottom:solid 1px #CCC" border="0" />

 

ボーダーラインはシリウスのリボンメニュー５で読み込んでます
<hr style="border-bottom:solid 1px #CCC" border="0" />

 

上記例はフォントが　左に寄れていますが　以下のようにスペースを
空けることもできます

 

sriusu

 

記述コード
sriusu<div style="background-color: #FF0A0A; width: 200px; font-size: 15px;"><span style="color:#FF0A0A">....</span>200%</div>

 

スペースを空ける際　div要素で囲み隙間を開けようとしましたが
上手くゆかず　カンマを複数並べて　背景と同じカラーコードを指定
....　　カメレオン状態で表示
という　何でか？？カスタムです

 

 

左に配置するタイトルを並列に表示する際は　tableを使います

 

棒グラフ以外の背景が　赤色ですが　当サイト特有のＣＳＳ事情が
影響しています

 

通常の白背景サイトなら　背景は白色となります

 

 

sriusu	200%
woldp	100%
hatenablog	88%

 

 

記述コード

 

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>sriusu</td>
<td><div style="background-color: #834EFF; width: 200px; font-size: 15px;">200%</div></td>
</tr>
<tr>
<td>woldp</td>
<td><div style="background-color: #3C0AFF; width: 100px; font-size: 15px;">100%</div></td>
</tr>
<tr>
<td>hatenablog</td>
<td><div style="background-color: #0AFF15; width: 88px; font-size: 15px;">88%</div></td>
</tr>
</table>

 

 

ここまではscriptを含まないＨＴＭＬ記載のみで表示する方法でした

 

---

追加記事

 

無料で使えるグラフサービス
statpedia.

 

使い方は、サイトを開いて画面中央の
BUILD YOUR OWN　ボタンをクリックし、左のシートに数値を記載するだけ

 

 

上部のメニューからグラフのスタイルは好みで選ぶこともできます

 

 

アカウントに登録すればグラフの保存や共有が可能となります

 

こちらでサイト到来
http://statpedia.com/

 

 

---

 

スポンサーリンク

 

 

---

 

 

横範囲指定　棒グラフ
シリウスサイトにグラフチャートを表示させよう
シリウスカスタマイズ