HTMLに関するnaoki_ng08のブックマーク (3)

  • 令和のHTML / CSS / JavaScriptの書き方50選


    Web 2024Web 調 1. HTML  Lazy loading <img>loading="lazy"
    令和のHTML / CSS / JavaScriptの書き方50選
  • JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた! : うえぶはっく

    ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です! 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基的な使い方を中心にご紹介しようと思います! 必要なファイルを準備しよう! 「CanvasJS」の体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます! // index.html <!d

    JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた! : うえぶはっく
  • HTML5のcanvas機能で綺麗なグラフが作れる!「Flotr2」を試してみた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    HTML5のcanvas機能を使用してグラフが作成出来るライブラリ、「Flotr2」がとても素敵だったので試してみました。グラフは円グラフ・棒グラフ・折れ線グラフなど様々な形での表現が可能です。 使用方法 使用するときのルールは以下の通りです。 「flotr2.min.js」を読み込む グラフを表示するdivのID名を決めて、ソースを書き換える(デモでは「#graph」) 上記IDにwidth、heightを設定する あとはサンプルのソースの数値や項目名など書き換えればOK。 デモ 表現出来るグラフが紹介しきれないくらいたくさんあるので、汎用性のある折れ線グラフ、レーダーチャート、円グラフを試してみました。 折れ線グラフ デモページはこちら <br /> <!DOCTYPE html><br /> <html lang="ja" dir="ltr"><br /> <head><br />

    HTML5のcanvas機能で綺麗なグラフが作れる!「Flotr2」を試してみた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 1