HTML＞CLIP-PASS / SVGのデータを作成する

Layers

ここで操作画像を選択

　

幅 (W):		400px
高 (H):		400px
背景:
グリッド設定	グリッド表示 グリッド吸着
グリッド間隔(%):		10%
グリッド色:	選択中の色: #000000
図形の透明度(%):		60%
ハンドルの大きさ:		12px

クリップパス/SVGのデーターを作成する。(copilotにより作成)
①頂点を増やすには、辺の少し外側をクリックする。
②頂点をダブルクリックすると削除される。
③図形の移動は、siftキー+矢印キーで10%ずつ、矢印キーのみで1%ずつ移動
④siftキー+矢印キーで垂直方向、水平方向に固定移動
⑤undoは、Ctrl + Zで、1回戻れる。
得られるデーターは、%単位ですので、図形の拡大・縮小でも形が崩れません。

クリップパスをsvgに変換
<svg xmlns="http://w3.org" viewBox="0 0 100 100">
<!-- pointsはそのまま、polylineに変えてstroke（線の色）とwidth（太さ）を指定 -->
<polyline points="0.0,0.0 0.0,30.0 77.0,30.0" fill="none" stroke="black" stroke-width="2" /> </svg>

HTML＞横棒グラフをHTML形式で出力する

発現週間（週）			発現数（例）
	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12
	13

---設定パネル---

グラフの幅を入力	：	px
背景の色	：
バーの太さを入力	：	em
バー要素幅を入力	：	em
棒の色	：
最大目盛りの変更	：
縦軸名の変更	：
横軸名の変更	：

　

軸名	縦軸名説明	棒の長さ	棒の数値
縦軸-1行目		%
縦軸-2行目		%
縦軸-3行目		%
縦軸-4行目		%
縦軸-5行目		%
縦軸-6行目		%
縦軸-7行目		%
縦軸-8行目		%
縦軸-9行目		%
縦軸-10行目		%
縦軸-11行目		%
縦軸-12行目		%
縦軸-13行目		%

横棒グラフのHTMLデーター作成ソフト(copilotにより作成)
①横棒グラフに項目を入力して、HTML形式で得る。
②データをコピーして、ページに貼り付けるだけ。CSSはインラインのみなので、＜table＞部分のみで動作する
③貼り付けた後も、＜table＞,＜tbody＞のCSS変数を変えるだけで簡単に数値を修正できる。
④横軸の目盛りは、貼り付けた後は修正が難しい。
⑤縦軸の項目数など細かい修正は、貼り付けた後自分で行ってください。

HTML＞円グラフを作成してHTML形式でデータを得る

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

テキスト6

テキスト7

テキスト8

テキスト9

テキスト10

グラフ設定

円のサイズ: px

0%にすると表示されません

円グラフ作成エデッタ(copilotによる)
①円グラフを作成し、クリップボードにコピーしたデータを、目的のページに貼り付ける。
②ドーナッツの白丸がいらない時は、 radial-gradient(white 30%, transparent 31%),を削除してください。色を変えたい時は、whiteを別の単語にしてください。
③テキスト移動時、1回クリックしてからD＆Dするとやりやすいです。
④円グラフ部分をダブルクリックするとグラフ変更のウインドウがでます。
⑤書き出されたテキストを選択・コピーしてご利用ください。
⑥テキストをダブルクリックするとテキスト修正できます。

HTML＞縦棒グラフを作成してHTML方式でデータを得る

発現例（例）		87	94	41	43	10	4	4	1	0	1	0	0	0
		4	8	12	16	20	24	28	32	36	40	44	48	48↑
		投与期間（週）

▼ グラフ基本設定
高さ(px): | 最大値: | 棒の色:
▼ 軸ラベルの設定
縦軸名: | 横軸名:
▼ データの入力（カンマ区切り）
各棒の数値:
横軸の項目:
※数値の数と項目の数を合わせてください

縦棒グラフ作成エディッタ(copilotでの作成)
①「この表のHTMLをコピーする」をクリックすると、クリップボードにコピーされるので、ページに貼り付けてください。
②＜table＞タグを利用して作成されます。
③背景色の変更などは、貼り付けたデータを直接修正してください。高さなど大幅の修正はできません。
④スタイルシートはインライン記述になってます。＜table＞ 部分のみで表示できます。