HTML,CSS簡単グラフ作成

ショウタロウ

: HTML,CSS簡単グラフ作成

項目に記入するだけで簡単にグラフをHTMLとCSSのコードに変換できます。

111

がお気に入り登録しました。

投稿日時：

プロンプト実行例

「グラフ形式, タイトル」に表示したいグラフ形式とグラフのタイトルを記入してください。次に「名前, パーセント」に記入して実行するとHTMLとCSSのコードが出力されます。

グラフ形式 , タイトル

名前 , パーセント

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
5    <script type="text/javascript">
6      google.charts.load('current', {'packages':['corechart']});
7      google.charts.setOnLoadCallback(drawChart);
8
9      function drawChart() {
10        var data = google.visualization.arrayToDataTable([
11          ['血液型', '割合'],
12          ['A型', 40],
13          ['B型', 30],
14          ['O型', 20],
15          ['AB型', 10]
16        ]);
17
18        var options = {
19          title: '血液型割合',
20          width: 400,
21          height: 300,
22          colors: ['#ff9999', '#ffcc99', '#ffff99', '#ccff99']
23        };
24
25        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
26        chart.draw(data, options);
27      }
28    </script>
29  </head>
30  <body>
31    <div id="chart_div"></div>
32  </body>
33</html>

他のプロンプトもチェック

画像生成
キャラクター作成
推奨モデル - DALL•E 3
あなたに"スタンド能力"を授けます！ジョジョの奇妙な冒険 -スタンドの矢~
名前を入力するだけであなた専用のスタンドを授けます。画像内にはスタンド能力や能力チャートも一緒に生成されます。生成エラーが発生する場合は、もう一度「画像を生成する」をクリックしてください。
1
2
25
597
Yohei Morimoto ~AIを活用した動画制作・Dify開発~
チャットボット
推奨モデル - GPT 4o
給水装置工事主任技術者試験　解説
給水装置工事主任技術者試験
1
0
3
47
user_144034477196208128
画像生成
マーケティング一般
推奨モデル - DALL•E 3
12月
添付のキャラクターで萌え絵漫画風の作風・演出・表情表現を重視した漫画を生成してください。日本の漫画形式として、右から左・上から下へと自然に読めるコマ割りにしてください。コマの配置や形状は自由ですが、視線誘導だけは日本式の読み順に従わせてください。【禁止事項】・左→右読み、下→上読みの構成。・別人に見えるアレンジ・参照キャラの特徴を他キャラに置き換える・英語にする。セリフの横書き。・色の変更・服装の改変・モノクロ、白黒、線画、トーンのみ、グレースケールでの出力
0
0
11
82
user_119919102811601920
画像生成
物語・脚本・プロット
おんなのこ
おんなのこ
0
0
2
157
user_310974745016948736

HTML,CSS簡単グラフ作成

コメント 0

他のプロンプトもチェック