HTML,CSS簡単グラフ作成

ショウタロウ

: HTML,CSS簡単グラフ作成

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

127

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

投稿日時：

プロンプト実行例

「グラフ形式, タイトル」に表示したいグラフ形式とグラフのタイトルを記入してください。次に「名前, パーセント」に記入して実行すると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>

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

画像生成
キャラクター作成
黒ギャルイラスト風。
スタイリッシュなギャル系の女の子。日焼けした肌、ピンクのハイライトが入ったウェーブのかかったロングブロンドヘア、キラキラのアイシャドウとグロッシーなリップで大胆なメイクを施しています。クロップ丈のヒョウ柄ジャケット、ホットピンクのミニスカート、ハイヒールの厚底ヒールという、露出度の高い派手な衣装を身にまとっています。長く飾られたネイル、派手なアクセサリー、そして遊び心あふれる自信に満ちた笑顔。舞台は、キラキラとハートが舞い散る、ネオンに照らされた夜の東京の街。アニメ調の鮮やかな色彩で、全身ポートレートで撮影されています。初期から更新済み
0
0
11
1.07K
ぺぺ
資料作成
プラント設備の研修資料作成用プロンプトを
設備名を投げるだけで、研修用資料を作成いたします。たたき台として使うもよし。
1
0
8
106
user_236553785647617025
計画立案
WEBデザインお悩み教室
WEBデザインで困ったことは何でも丁寧に教えてくれます。デザイナーが一人しかいない現場やすぐに相談できる人が周りにいない時など、一度試しに使ってみてください。#WEBデザイン＃UIデザイン＃UXデザイン
0
0
1
78
user_128127168851136512
GPTs
要件定義・設計
出来る‼️非エンジニアでもAIの力を使ってシステム構築の要件定義を頑張るgpts 🎨
こんにちは！今日は、中学生の君にも分かりやすく、Webサービスの要件定義を助けるエージェントプロンプトの構造について説明するよ。想像してみて。君がWebサービスを作りたいと思ったとき、何が必要かな？まず、そのサービスが何をするのか、誰のために作るのかを決めることが大切だよね。でも、それだけじゃ不十分なんだ。そこで登場するのが、要件定義エージェント！このエージェントは、君の考えを引き出すために、いろんな質問を投げかけるんだ。例えば、「サービスでできることを詳しく教えてください」とか、「利用者はどんなことをしたいと思っているでしょうか」といった感じ。エージェントは、君の答えを基に、サービスに必要な機能をリストアップしていくよ。「ユーザー登録が必要だね」「商品検索機能が欲しいね」みたいに、どんどんアイデアを整理していくんだ。次に、エージェントは君のWebサービスを作るための技術的なアドバイスをするよ。「こんなツールを使うと良いですよ」「このような構成でファイルを管理しましょう」って感じで、わかりやすく説明してくれるんだ。でも、エージェントは君の考えをそのまま受け取るわけじゃないんだ。例えば、君の要求があいまいだったり、実現が難しそうだったりすると、「こういう風に変更するのはどうでしょうか」って提案してくれるんだよ。最後に、エージェントは君との会話を基に、要件定義書を作成してくれるんだ。この書類には、君のWebサービスの目的や、必要な機能、使う技術などが詳しく書かれているんだよ。これを読めば、開発チームのお兄さんやお姉さんたちも、君の考えを理解しやすくなるんだ。こんな感じで、要件定義エージェントは君の考えを引き出し、整理して、分かりやすく説明してくれる頼もしい相棒なんだよ。難しそうに見えるかもしれないけど、エージェントが一緒なら大丈夫。君のアイデアを形にする第一歩として、ぜひ要件定義エージェントを活用してみてね！言葉や仕組みを知らないと自分が楽しいと思えるサービスやゲームは作れません。抽象化、一般化されたプロンプトから以下に具体化されたアイデアや仕組み、ロジックを引き出せるか。それには自分自身の中にしかない創造性のインプットが不可欠です。SF作品で未来を予測しましょう。モノポリーしましょう。アドベンチャーしましょう。
17
0
79
367
ひろ吉🎨プロンプトデザイナー

HTML,CSS簡単グラフ作成

コメント 0

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