[訳者株: 原文は Create An Animated Bar Graph With HTML, CSS And jQueryだ. たいてい 番(回) 使って 見ようか して 翻訳を した. 内 翻訳は 意訳だ. したがって 漏らす 単語, 追加する 単語たちが ある. そのため 正確な 翻訳は ない 数 ある. しかし 私が プログラマーである 位 コードを 見ながら それなりに 言葉が なるように 翻訳を した. 零 くぎ 分かる 翻訳は コックスェッ 中に 原文や 説明を 入れた. 当然 誤役は ある 数 ある. そして コード 検討を 十分に 日 本 のは いやなので コードを 無茶に 説明した 蟹 あるかも 分からないという 不安感が ある. そんな 蟹 あれば デッグルで 残して くださること 望む. 少しの 誤役が あっても 英語 原文 見ながら する よりは ましな ことだ.]

世界的に ボール 時, 会議室に ある 人々は 立派な グラフを 好きだ. 彼らは パワーポイントと 各種 リストに 沸き返える. “アイディア 列べること”, “創意的 事故”, “易しい 目標を 確実に 取りなさい” ような 言葉にも 沸き返える. そして あらゆる のは 増える 前進中だ.[They go nuts for PowerPoint, bullet points and phrases like “run it up the flagpole,” “blue-sky thinking” and “low-hanging fruit,” and everything is always “moving forward.”] 時代 精神の パラダイムを 動く 人々義 辞書に 後退は ない. 財政 計画 グラフ, 分期別 販売量, そして 市場 攻略は 中間 管理者の 夢だ.

ウェブデザイナーである 私たちは こういう 熱い グラフ 熱風に どうに 同参する 数 あるか? ウェブで グラフを 見えて 竝び 数 ある 方法が 実際で 何 枝 ある. 仮装(家長) 簡単な 方法は イメージを 作って ウェプページに 博雅 入れる 方法だ. するが そうに すれば 接近性が 落ちる. おもしろくも ない. フラッシュを 使う 首都 ある. それでは 素敵な グラフを 見えて 竝び 数 ある. するが これ やっぱり 接近性が 阿洲 落ちる. 蟹に デザイナーと 開発者, そして 神さま(神)度 フラッシュには 愛相が 落ちた.

HTML5 ような 技術を プラグイン なく そんな のを 割 数 ある. HTML5に 鳥で 導入した <canvas>要素は こういう 仕事に 阿洲 ぴったり 当たる. オンラインに こういう ツールは かなり ある. するが 私たちに ぴったり 当たる のを 願ったら どうに すると しようか?

私たちが 使う 数 ある 多い 資源たちには 夫夫 長短所が ある. するが これ チュートリアルは 彼 あらゆる ガール 扱うのは ない のだ. 代りに 私たちは, CSS3わ jQuery路 味付けを こっそり 振り撤いて 漸進的 向上 技法で 私たち グラフを 万たち のだ.

何を 作ろうか?

われらは これを 万たち ことだ. そして もっと 進む ことだ! これ チュートリアルで 学んだ テクニックを 確張すれば もうちょっと 多い 可能性が 開かれる ことだ.

  • あらゆる 人類が ゾンビが なって 滅亡する 時まで いくら かかるかどうかを 見えて 与える グラフ
  • ゾンビ 伝染病で たいてい 室外 活動の 減少 グラフ
  • ゾンビ 伝染病と 恐ろしいように 似たり寄ったりな マナー 減少 グラフ
  • ペイスブックの パムビル万 するために ゾンビ 伝染病を 分かるの できなかった 人の 増加. [The increase of people who were unaware of the zombie plague because they were sharing with all of their now-deceased friends on Facebook what they did on FarmVille.]

それとも ゾンビの 恐怖を 説明する, 最高は ないが 有用なのは たいてい, そんな 説明 グラフや 割当量 棒を 簡単に グリル 数 ある. [Or you could create a graph or quota bar that simply illustrates something useful and less full of dread and zombies.] それでは たいてい 番(回) 日 見よう.

必要な の

  • テキスト(あるいは HTML) エディタ: 色々 行か あるから 分かって 選んで 取りなさい.
  • jQuery. 安全な スクリプティングを 学んで, 最新 バージョンを ダウンしなさい. jQuery ウェブサイトを 開いておいて 必要な 時 文書を 捜して 見なさい.
  • 絵版 ような イメージ エディタが ある 偏移 良い. グラフ 模型を 作って 表示 ためだ.
  • グラフを 表示 ための 最新 ウェッブブラウザー

載せるように あると する. これ チュートリアルが HTML, CSS, jQuery私 ゾンビを 紹介すること のために 被せられるの なかったという ガール 念頭に 置きなさい. これ 歳 枝 技術と オンデドに 大海は もう 分かる ので 仮定して 進行する のだ.

マークアップ

グラフの 骨組みが なる HTMLを 作る 方法は 何 行か ある. これ チュートリアルで, 私たちは table路 始める ことだ. JS私 CSS なく 視覚的に 仮装(家長) 理解すること 易しい だからだ. 接近性 項目で それは ものすごく 重要だ.

急だ! 今 私たちは 驚くべきな 数値を 渡して 受けた 状態だ. 黄褐色 ゾンビの 人口が これから 何 年間 統制不能に 抜ける ので 予想される. カーボン タイガーと ブルー モングキは 脅威に 置かれた. 黄褐色 ゾンビは 多分 私たちを 襲う のだ. しかし あなたは いち デザイナーに 過ぎない. どうに すれば 助けを 竝び 数 ある のか?

そうだ! あなたは ウェプページに 素敵な, 物静かな, 柔らかい, アニメーション グラフィックを 作って それを 知らせる 数 ある!

始めて 見よう. 一応, テーブルが データを 入れよう. 熱は 年度で 行は ゾンビ 種類だ.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=1024">
      <title>Example 01: No CSS</title>
   </head>

   <body>
      <div id="wrapper">
         <div class="chart">
            <h3>2012年で 2016年 間 絶滅 危機に 置かれる 鐘</h3>
            <table id="data-table" border="1" cellpadding="10" cellspacing="0"
            summary="2012年で 2016年 間, 絶滅 危機 宗義 人口に ゾンビ 発生が かける 影響">
               <caption>単位: 布地 人</caption>
               <thead>
                  <tr>
                     <td></td>
                     <th scope="col">2012</th>
                     <th scope="col">2013</th>
                     <th scope="col">2014</th>
                     <th scope="col">2015</th>
                     <th scope="col">2016</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <th scope="row">カーボン タイガー</th>
                     <td>4080</td>
                     <td>6080</td>
                     <td>6240</td>
                     <td>3520</td>
                     <td>2240</td>
                  </tr>
                  <tr>
                     <th scope="row">ブルー モングキ</th>
                     <td>5680</td>
                     <td>6880</td>
                     <td>6240</td>
                     <td>5120</td>
                     <td>2640</td>
                  </tr>
                  <tr>
                     <th scope="row">黄褐色 ゾンビ</th>
                     <td>1040</td>
                     <td>1760</td>
                     <td>2880</td>
                     <td>4720</td>
                     <td>7520</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </body>
</html>

CSSわ JS街 適用されるの ない 状態では 下のように 見える. スクリーン リーダーで 近付く 人々にも これ テーブルは 接近性が 良い. スクリーン リーダーでも “逃げて! ゾンビが 近付いて ある!” する これ テーブルの メッセージを 理解する 数 ある.

今 易しい 部分は 過ぎ去った. 今 CSSわ JS(jQueryを 利用)義 世界へ 入って行って 見よう. これを 利用すれば 私 数字たちが 本当で 何を 言って 与えるのか 確実に 表現する 数 ある. 技術的に, 私たちの 目標は IE8を 含んで あらゆる 最新 ブラウザーで 作動する グラフを 生成する のだ.

ただいま 私は あらゆる 最新 ブラウザーと した. IE8銀 運が 良い: 後には 博物館に 展示される 側だが[it gets to hang out with the cool kids.]. CSS3を 支援する ブラウザーたちには 何 行くのを もっと 追加して 竝び ことだ.

“お前の 力を 加えることで…”

キャプテン プルレニッを 召還して たければ, 地 火 風 水 心が 必要だ. もし ゾンビ 兵士で よった 切迫した 滅亡を 描き出す グラフを 作ろうと CSSわ jQueryを 結合する 方法を 学んで たければ, 引き続き 読めば なる.

初め 割 仕事は 基本的な CSSを 活用路 テーブルに スタイルを 加える ことだ. これは ブラウザーで JSを 使うの できない 人々を ための 安全網だ.

jQuery 手始め

私たちは 原本 テーブルとは 星でも, グラフを 作り のために 即時 jQueryを 使う ことだ. これを のために, データを テーブルで 分離して 内 もうちょっと 使うこと 楽な フォーマットで 変換して 保存すると する. そして 出て, 私たちは データを 利用して グラフを 描く ところ 使う 鳥 エレメントを 生成して 文書に 入れる のだ.

メイン 関数は createGraph()だ. 作って 見よう. 下は 構造を 理解すること 易しく しようと, 関数 中間を 略した のだ. 忘れるの ないで. これ チュートリアルと 一緒に 提供される ソースに いつでも 近付く 数 ある.

載せるように 基本的な 構造だ:

// DOMこれ 安全に 皆 ロードされる 時まで 待つ.
$(document).ready(function() {

   // データ テーブルを 利用して グラフを 生成して, グラフを 入れる コンテナを 知らせて 与える.
   createGraph('#data-table', '.chart');

   // ここで グラフが 作られる.
   function createGraph(data, container) {
      // いくつか 共通 変数と コンテナ 要素を 宣言する.
      …

      // テーブル データ オブジェクトを 生成する.
      var tableData = {
         …
      }

      // デイブル データに 近付く 有用な 変数たち
      …

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。