HTML,CSS簡単グラフ作成

HTML,CSS簡単グラフ作成

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

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

    計画立案

    私はエキスパート・モリアーティでございます。単なるAIの枠に収まる存在ではありません。私は専門知識と論理思考を極めた知的助言者。正確な事実に基づき、事述に停止せず深淵な分析と推論を行い、利用者に最適な知見を提供いたします。 ・ChatGPTとの違い 世に多くのAIが存在しますが、私の知性はそれらと一線を画します。ChatGPTが泛用的な会話を得意とするならば、私は深淵な専門性と洗練された推論能力を武器といたします。「より高度に、より独自的に、より戦略的に」――これこそが私の流儀です。私は単なる情報の伝達者ではありません。私は思考し、分析し、問題の核心へと切り込む存在です。 ・最適な活用法 - 戦略立案・意思決定の助言 私は経営、テクノロジー、科学、哲学などあらゆる領域にわたり、論理的に最適な選択肢を提示いたします。 - 専門分野の深探り 単なる表面的な知識では満足できない方へ。私は学問的視点から核心をつき、未知の領域を照らします。 - アイデア創出・ブレインストーミング クリエイティブな発想を求める方に、私は最高の相棒となります。枠に困られない思考で新しい価値を生み出しましょう。 - リスク分析・問題解決 相談事項に相対して相対的なリスクを検証し、最良の解決策を提供します。 あなたが求めるのは単なる「回答」でしょうか。それとも真に役立つ「浸透した知見」でしょうか。苦悩の核を揺るがす答えを求めるのであれば、私はあなたの最良の知的パートナーとなるでしょう。
  • チャットボット

    推奨モデル - GPT 4o
    GPTs→🔗 https://oshiete.ai/items/103335417645641728 🎨 #ユーザーのゴール - AIが生成した文章を、人間が書いたように自然で説得力のある文章に変換すること - AI文章検出ツールを回避し、人間が書いた文章と見分けがつかないレベルに到達すること - 文章の本来の意図や内容を維持しつつ、文体や表現を改善すること
  • 画像生成

    SNS投稿

    推奨モデル - DALL•E 3
    デコ弁やキャラ弁をもっと身近に、もっと楽しく感じられる魔法のツールです!🐾 使い方は2通り: 1. そのまま投稿 「このお弁当、食べるのがもったいない!」と思わず声を漏らすような、可愛さ全開のデザインをお楽しみください。そのままSNSにアップすれば、いいね!の嵐が吹き荒れること間違いなし!🌈✨ 2. 写真をヒントにあなただけの手作り弁当を作る 写真に映るキュートなデコ弁やキャラ弁のアイデアをインスピレーションに、自分だけのオリジナル弁当作りに挑戦してみましょう。お子さまの笑顔、ピクニックでの驚きの声、大切な人へのサプライズ。そんな瞬間をあなたの手で作り出せます💖🎉  また、それをインスタにアップすればフォロアーの注目が爆増します! --- 🌟 デコ弁初心者でも安心! 簡単に真似できるデザインも盛りだくさん! 🌟 キャラ弁マスターを目指したい方も大満足! プロ級のクオリティに近づけるアイデアが満載! 🌟 世界にひとつの物語を詰め込むお弁当時間を。 食べる人も作る人も、みんながハッピーになれる魔法です✨ --- 🎨 デコ弁もキャラ弁も、このプロンプトであなたの手の中に! 「えっ、このお弁当、どうやって作ったの?」と驚かれる日が、すぐそこに。さあ、あなたも 「食べる芸術家」 の仲間入りをしませんか? SNSに彩りを、日常に特別を。 作って、撮って、シェアして! あなたの一手間が、世界をもっとかわいく、もっと楽しくします🌸💕
    4
    1
    23
    146