Chart.jsで作成する折れ線グラフの実例
たまに必要に迫られて、ブラウザで完結するように生のJavaScriptを書くことがあります。 今回はそんなシンプルな構成でも案外きれいなUIを作成するのに役立つグラフ作成ライブラリ、Chart.jsについてメモしておきます。 機能の豊富さとコーディングの簡潔さは往々にしてトレードオフなので、ライブラリの選択が重要ですね。 D3ほど高機能でなくてもいいが、できるだけ簡単にグラフを書きたい、という時に扱いやすい（と個人的に思っている）ライブラリです。 ■ シンプルな記述 ■ よく使われるような種類のグラフなら標準の機能だけでも作成できる ■ (ちょっとサイズが大きいが)ファイルひとつで動く ■ デフォルトでアニメーション(パフォーマンス要件が厳しければ無効化することもできる) もくじ： Chart.jsの設置 基本の折れ線グラフ 線のスタイル 線の色と背景色 破線 直線 ステップ 点 欠損値
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
Flotでグラフ作成 時系列のグラフ | Arti
続いて、時系列のグラフを作成してみます。 時間データは1970/1/1からのミリ秒で表現します。 UNIX時間とかエポックミリ秒といわれるやつです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Basic Linechart</title> <!-- 必要なライブラリのインポート --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/flot/jquery.flot.min.js">
新しいRuby向けプロットライブラリNyaplot - ほげほげにゃ
はじめに Google Summer of Code 2014にSciRubyの学生として参加していました。 3か月の期間が無事終了し、ちゃんとした成果物ができたので記事にします。 Nyaplotについて、コードや詳しい使い方はこちらをご覧ください: domitry/nyaplot · GitHub domitry/Nyaplotjs · GitHub あーなんか余裕なかったなあとかGSoCの感想みたいなのはまた落ち着いてから書こうかと思います。 概要 IRuby notebook上で動作する、plotのためのgem。 すごいところ インタラクティブな/インタラクティブにplotができる。 IRuby notebook上で対話的にプロットを作ることができます。また標準で用意される様々なモジュールがユーザーの対話的な操作を支援します。 作ったプロットはSVGやWebGLを使いブラウザ上に表示
ＩＥ8でCharts.jsはうごかない - ウィリアムのいたずらの、まちあるき、たべあるき
ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです（たま～にコンピューター関係も） で、IEの互換性（IE７～IE１１）いろいろのつづき。 IE8にして、ちょっとこまったのは、Chart.js。 canvasをつかっているので、IE8はだめ・・・なんだけど、 IE8でCaanvasをつかえるようにするExplorerCanvasをつかっても、えらーがでる（ぐたいてきには、Chart.jsでmeasureText() メソッドがないエラー。IE9ではいったらしい） う～ん、【jQuery】IEでも使えるグラフ描画ツールをみると、jQuery Google Chartsが使えそうなので、jQuery Google Chartsにしますかね・・・ ここ jQuery Google Charts http://keith-wood.name/gChart.html の「
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
グラフを扱うJavaライブラリ「Jung」の紹介 - Twitterのグラフ構造を視覚化 - public static void main
java-ja 第12回のLTで話そうと思ったのですが、出番がなかったので資料をブログで公開しておきます。 Jungは研究などでグラフ構造が出たときに、理解しやすくするために可視化するのに使っています。他にもいくつかグラフを扱うライブラリは存在していますが、日本語の資料があったのと拡張可能なことが多かったのでJungを結果的に使うようになりました。 以下はそのJungについての簡単な解説です。 Jungとは Jungの正式名称はJava Universal Network/Graph Frameworkで、ネットワーク(グラフ) 構造の分析や視覚化を行うためのJavaのOSSライブラリです。グラフ理論、データマイニング、ソーシャルネットワーク分析のアルゴリズムを数多く実装しています。 安定バージョンは1.7.6で最新は2.0betaで、BSDライセンスで使用できます。 http://jun
グラフィック・ライブラリ:glib2.js
1998.7.16 ver-1.2 小山智史(弘前大学) 2001.3.15 ver-1.3e ...NN4, NN6, IE5に対応 2004.2.23 使用例を追加 2004.3.8 河合雅司氏(富山商船高専)による改善を組み込み「glib2.js」に改称(従来版は「glib.js」, 河合雅司氏の版は「glibk.js」) 2004.10.25 ver-2.0a ...Gclose()中で空欄のデータは表示しない。Gdata()でgsymbolとgcolorが設定値を超えた場合は繰り返す 2005.11.18 ver-2.0e ...gplotの変数の最大数(NCHAIN)を20から30に変更。plot(), gplot(), line(), fline()などでドットサイズや線の太さの指定を追加。 2006.1.24 ver-2.0f ...farrow()を追加 2014.2.1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなグラフAPIとは はてなの人気・最新記事を集めました - はてな
aiCharts -Android向けチャート作成エンジン- ライトストーン