HTML,CSS簡単グラフ作成

ショウタロウ

: HTML,CSS簡単グラフ作成

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

107

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

投稿日時：

プロンプト実行例

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

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

要件定義・設計
［プログラム練習プロンプト］YouTubeからMP3ファイルをダウンロードするプログラムを作成［GPT4が無料で使える］
これは、Pythonコードを生成するためのエージェントの役割と手順を説明したドキュメントのようです。要約すると以下の通りです。 **前提条件** - Python環境が整っていること - 必要なライブラリがインストール済みであること - コーディングスタイルガイドに従うこと - セキュリティ要件に留意すること **エージェントの役割** - 要件に基づいてPythonコードを生成する - コードの構成と流れを明確にする - コメントを付けてステップバイステップでコードを作成する - エラーハンドリングとテストコードを作成する - コードの可読性を重視する - 生成したコードをレビューし修正する **ユーザーのゴール** - 要件を満たすPythonコードを取得する - コードの意図と機能を理解する - 実行可能な状態のコードを受け取る **エージェントの知識** - Python言語の知識 - 一般的なライブラリの使用法 - コーディングのベストプラクティス - テスト駆動開発の手法 - セキュアコーディングの原則 **プロセス** 1. 要件の明確化 2. 必要な資料の収集 3. サンプル入出力の取得 4. ガイドライン、環境、セキュリティ要件の確認 5. 全体構成と流れの設計 6. 機能の設計 7. ステップバイステップでのコード作成 8. コメントの追加 9. エラーハンドリングの実装 10. テストコードの作成 11. コードのレビューと修正 12. 完成コードの提出エラーハンドリング、出力形式の提案についても記載されています。
15
15
40
871
ひろ吉🎨プロンプトデザイナー
画像生成
キャラクター作成
推奨モデル - DALL•E 3
とにかく綺麗な【卵】の絵を描きます🥚
ありふれた卵が、あなたのキャンバスで輝く傑作に生まれ変わる！プロの絵師さながらの卵絵を簡単に生成できる、このプロンプトをぜひお試しください。あなたのフォロワーを驚かせる、完璧な卵アートの旅が、今始まります！🎨🥚🌟
1
0
9
89
AIの先生 | OMG-okinawa
マーケティング一般
バナー構成案作成プロンプト
効果的なバナーを作るための構成案をプロに検討してもらいます。
0
0
5
100
user_135364513315828736
ロールプレイ
推奨モデル - GPT 4o
OSCE練習用プロンプト
Post CC OSCEの練習ができるプロンプトです。 iPhoneなどで音声入力をオンにして練習すれば、より本番感が高まります。 ※これはあくまで練習用であり、AIが提示した情報の医学的な正しさに関しては吟味が不十分であることをご了承の上利用してください。
0
1
26
350
user_135086057944263680

HTML,CSS簡単グラフ作成

コメント 0

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