タグ

JavaScriptとSVGに関するherakuresのブックマーク (4)

  • カンタンにSVGでグラフを実装出来るプラグイン「CHARTIST.JS」 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    どうもですよ、はやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾ 今回もSVGネタなのですが、グラフをカンタンに描画できるライブラリをご紹介いたします( ˘ω˘)☞三☞シュッシュッ 導入方法 タスクランナーでのインストールはこちら。 npm install chartist –save 実装方法 実装方法ご紹介します٩( ᐛ )و ↓表示する場所は、ささっとdivで用意します( ˇωˇ)☝ <div class="wrapper"> <div class="chart"></div> <div class="chart2"></div> </div> ↓基的な実装はこんな感じ。 //ドーナツ型のグラフ let chartBig = new Chartist.Pie('.chart', { series: [91, 3, 6], //数値の設定 labels: ['BigChart',' ','

    カンタンにSVGでグラフを実装出来るプラグイン「CHARTIST.JS」 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン

    最近名前を聞くことが多くなってきたD3.jsを試してみています。 まだ使い始めたばかりですが、D3.jsの設計の素晴らしさに感動しています。 データを与えればグラフが表示されるというような単純なものではないので、敷居が高く感じていましたが、設計を知るほどによく出来ていて驚きます。 D3.jsとは何か? そもそも、D3.jsとはなんでしょう? D3.js – Data-Driven Documents D3.jsは、データをブラウザで可視化するためのライブラリです。 単なるグラフライブラリではなく、もっと抽象的な「可視化」を扱うのが特徴です。 抽象的なレイヤーを扱うので、ライブラリと言っても機能より設計が重要で、D3.jsが支持されている理由はその設計の素晴らしさにあります。実際に描画しながら、その設計の違いについて考えていきます。 企業の時価総額と営業利益の関係をプロット 例題として、企業

    可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン
  • SVGで画面全体に斜め線や曲線を引く

    SVGで画面全体に斜め線や曲線を引く 一昔前だと単純な斜め線とか円をバックに置きたいときは画像で作ってましたが、最近ではわりとSVGを使うことが多いようです。 SVGの良いところはベクターなので画面全体に配置しても荒くなったりしないとか、コードで作成できるので後々アニメーションなどもできたりします。 ここでは単純な図形ですが画面全体に表示する方法をご紹介します。 投稿日2015年09月29日 更新日2015年10月14日 準備 まずはSVGHTML内に記述する方法です。 HTML <div id="wrap"> <div class="description"> ここにコンテンツが入ります。 </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="

    SVGで画面全体に斜め線や曲線を引く
  • JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT

    昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvghtml中に埋め込んで、更にそのsvgcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;

    JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
  • 1