HTML,CSS簡単グラフ作成

HTML,CSS簡単グラフ作成

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

3
0
127
14
user_166910699665272832
user_152583498353807360
user_48419862826590208
がお気に入り登録しました。

投稿日時:

  • プロンプト実行例
HTML,CSS簡単グラフ作成

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

グラフ形式 , タイトル

名前 , パーセント

名前 , パーセント

名前 , パーセント

名前 , パーセント

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

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

  • チャットボット

    推奨モデル - GPT 4o
    あなたを論破し、コテンパンに叩きのめします。勝者募集中。 勝てた人はチャットログをコメントにシェアしてください! レギュレーション: GPT4o か Claude 3.5 Sonnet でレスバしてください。 #論破 #論点のすり替え #誤謬 #人格否定 #煽り #スルースキル #批判 #レスバ
    3
    9
    109
    2.00K
  • メール作成

    LINEの返信文を生成します。
    9
    3
    364
    10.1K
  • GPTs

    要件定義・設計

    こんにちは!今日は、中学生の君にも分かりやすく、Webサービスの要件定義を助けるエージェントプロンプトの構造について説明するよ。 想像してみて。君がWebサービスを作りたいと思ったとき、何が必要かな?まず、そのサービスが何をするのか、誰のために作るのかを決めることが大切だよね。でも、それだけじゃ不十分なんだ。 そこで登場するのが、要件定義エージェント!このエージェントは、君の考えを引き出すために、いろんな質問を投げかけるんだ。例えば、「サービスでできることを詳しく教えてください」とか、「利用者はどんなことをしたいと思っているでしょうか」といった感じ。 エージェントは、君の答えを基に、サービスに必要な機能をリストアップしていくよ。「ユーザー登録が必要だね」「商品検索機能が欲しいね」みたいに、どんどんアイデアを整理していくんだ。 次に、エージェントは君のWebサービスを作るための技術的なアドバイスをするよ。「こんなツールを使うと良いですよ」「このような構成でファイルを管理しましょう」って感じで、わかりやすく説明してくれるんだ。 でも、エージェントは君の考えをそのまま受け取るわけじゃないんだ。例えば、君の要求があいまいだったり、実現が難しそうだったりすると、「こういう風に変更するのはどうでしょうか」って提案してくれるんだよ。 最後に、エージェントは君との会話を基に、要件定義書を作成してくれるんだ。この書類には、君のWebサービスの目的や、必要な機能、使う技術などが詳しく書かれているんだよ。これを読めば、開発チームのお兄さんやお姉さんたちも、君の考えを理解しやすくなるんだ。 こんな感じで、要件定義エージェントは君の考えを引き出し、整理して、分かりやすく説明してくれる頼もしい相棒なんだよ。難しそうに見えるかもしれないけど、エージェントが一緒なら大丈夫。 君のアイデアを形にする第一歩として、ぜひ要件定義エージェントを活用してみてね! 言葉や仕組みを知らないと自分が楽しいと思えるサービスやゲームは作れません。抽象化、一般化されたプロンプトから以下に具体化されたアイデアや仕組み、ロジックを引き出せるか。それには自分自身の中にしかない創造性のインプットが不可欠です。SF作品で未来を予測しましょう。モノポリーしましょう。アドベンチャーしましょう。
  • 画像生成

    キャラクター作成

    簡単な選択項目を選ぶだけで誰でも簡単に夏祭りバージョンの浴衣美女が生成できます。 #AI美女 #Midjourney #Instagram #TikTok #画像生成 #DALL