HTML,CSS簡単グラフ作成

HTML,CSS簡単グラフ作成

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

3
0
115
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が自動で謝罪文を書いてくれます。仕事でもプライベートでも謝罪が必要なときは、まず『謝罪Pro』を頼ってみてはいかがでしょうか?
    3
    1
    622
    1.85K
  • 物語・脚本・プロット

    推奨モデル - Gemini
     入力したテーマに基づいてオリジナルの名言を生成するプロンプトです。感情を深く掘り下げ、強力な言葉や比喩を用いて、心に響く名言を5つ作り上げます。「Gemini 1.5 Pro」に切り替えて実行するのが一番良さそうです。 <用途例>   【プレゼンテーションやスピーチ】感動的な名言を引用することで、聴衆の関心を引き、メッセージを強調します。 【SNSやブログの投稿】心に響く名言を投稿することで、フォロワーの共感を得ることができます。 【自己啓発やモチベーションアップ】毎日の励ましや自己反省の一環として、自分に向けた名言を作成し、モチベーションを維持します。 【ギフトやカードのメッセージ】特別な日に贈るカードやギフトに添えるオリジナルの名言で、相手に感動を与えます。   <メリット>   【クリエイティブな表現力の向上】自分自身の感情や考えを言葉にすることで、表現力が養われます。 【個性を反映】自分だけの名言を作成することで、個性や独自の視点を表現できます。 【感動や共感を生む】感情に訴える名言を作成することで、他者との共感を深めることができます。 【簡単で楽しい】指定された手順に従うだけで、簡単に魅力的な名言を作成できます。     「 ぜひ、あなたの唯一無二の名言を創り出してください。感動を呼び起こし、日常に彩りを与えるオリジナルの名言があなたの人生を変えるかもしれません。
    8
    0
    63
    1.06K
  • GPTs

    SNS投稿

    必要事項を入力するだけで、タイトルと説明文を作成してくれます。あとはメルカリ出品時にコピペするだけ。https://chat.openai.com/g/g-DOHWB956E-merukarichu-pin-sapoto
    2
    0
    44
    111
  • SEO

    推奨モデル - GPT 4o
    あなたが売りたい商品のURLを送信するだけ。 URLを送信するだけ。完全全自動でSEO最適化された記事作成ができます! あなたの商品リンクを高品質なアフィリエイト記事に変換します。SEO最適化された魅力的な記事を、思考停止でわずか数秒で生成。面倒な執筆作業から解放され、アフィリエイト収益に集中できます。 主な特徴: 完全自動化:商品URLを入力するだけで、充実した記事を即座に作成 SEO対策済み:検索エンジンで上位表示を狙える最適化された文章構成 売上重視:購買意欲を刺激する、説得力のある商品紹介 多様な記事スタイル:レビュー、比較、ハウツーなど、様々な形式に対応 時間節約:記事作成の時間を大幅に削減し、ビジネス戦略に集中 「売れるアフィリエイトSEO記事メーカー」で、あなたのアフィリエイトマーケティングを次のレベルへ。URLを送信するだけで、収益化への道が開かれます。