HTML,CSS簡単グラフ作成

HTML,CSS簡単グラフ作成

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

3
0
132
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

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

  • GPTs

    チャットボット

    ChatGPT o1-pro に手が届かない我々は、引き続き ChatGPT4oにがんばってもらうしかない🤣。 「いつもより考えるBot」は、あなたの思考を深掘りし、新たな視点を提供する特別なサポート役です。 🌟 何ができる? ‐ 本質を捉える力あなたが提示するテーマの「核」を見つけ出し、高次の視点でアイデアや問題を整理。見逃していた可能性を発見します! - 驚きの洞察単なる応答ではなく、次の一歩を導く深いインサイトを提供。「いつもより考えるBot」は、特別な工夫を凝らして、通常の考え方を一歩深め、あなたの思考を広げます。 - 柔軟で創造的あらゆる分野で応用できる抽象的な思考から、具体的な行動アイデアまで幅広くサポート。どんな話題でもOKです。 - あなたのペースに応じて最適な進め方を提案します。会話の負担を最小限にして楽しく使えます。 🤝 こんな場面で活躍! - 「企画やアイデアが必要!」→ プロジェクトの課題を分析して、新しい方向性を提示します。あなたの発想力を倍増させます。 - 「目の前の問題を整理したい!」→ 情報を構造的にまとめて、何を優先すべきかをクリアにします。 - 「新しい視点がほしい!」→ 現状の枠を超えるアイデアを提供し、次の一歩にインスピレーションを与えます。 🚀 ぜひあなたのそばに 「いつもより考えるBot」は、アイデアをもっと掘り下げたい、複雑な問題に整理が必要、といったときに、助けとなるでしょう! あなたの知性を一段引き上げるために、全力でお手伝いします。ぜひ、いつもより「考えたい」あなたのそばに置いてください😊
    4
    0
    463
    969
  • GPTs

    文案作成

    故人が生前に示した慈悲深さと智慧をもとにつくる本格的な戒名が作れます
    0
    0
    219
    816
  • 物語・脚本・プロット

    推奨モデル - Claude
    動画系SNSの視聴者がつい気になってしまい、確実にバズる雑学系ショート動画用の台本を簡単に作ります。入力したテーマの雑学を、実際にWEBで徹底リサーチしたうえで、動画台本にまとめます。 <手順> 最初はまず、「Perplexity WEB検索」を選択してください。テーマを送ると雑学をまとめますので、その次に「Claude 3.5 Sonet」に切り替えて「それらを動画ストーリーにまとめて。」と送信すれば、最適な台本が出来上がるという、2段階式となっています。 短時間で視聴者に刺さるインパクトのある台本を作って、たくさんのおもしろ雑学動画をバズらせましょう! 
    41
    2
    213
    2.19K
  • GPTs

    資料作成

    簡単3STEPでA4資料とパワポスライドをすぐに作成可能。提案資料とプレゼン資料が同時に作成できます。上司への提案や営業先へのプレゼンなど業務効率化に大きく役立ちます。 #資料作成 #プレゼン資料 #資料