Diagramly - Draw Diagrams Online
Flowchart Maker and Online Diagram Software draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy™ and Lucidchart™ files . Loading... Please ensure JavaScript is enabled.
React/TSでChart.jsやってみる | DevelopersIO
プロジェクトセットアップ Reactプロジェクト生成 npx create-react-app project-name --template typescript project-name部分に自分のプロジェクト名を書いてください。 ライブラリ追加 npm i chart.js react-chartjs-2 react-chartjs-2にtypeが定義されているので@types/react-chartjs-2じゃなくてreact-chartjs-2を設置してください。 chart.jsはreact-chartjs-2利用するために設置します。 Code example Graph.tsxをsrc/に作ってください。 // src/Graph.tsx import { Bar } from 'react-chartjs-2'; const Graph = () => { const d
Google ChartsのCombo Chartで右側のY軸に対応したデータを指定する - Qiita
ことのてんまつ 縦軸が左右に二つあるグラフ(2軸グラフ?)を使いたくて、Google Charts の ComboChart を調べていたのだけれども、巷に出回っているサンプルは複数の課題を一緒に説明しているサンプルコードが多くて、何が必要なのかがわかりにくい。。。読解力が乏しい私にもわかるように、ピンポイントで教えてください!!! で、必要な部分だけを抽出した結果がこれです。 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="/javascript/combocharts-sample.js"></script> </head> <body> <div id="ch
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ
Reactのチャート描画ライブラリRechartsで様々なチャートを出力する - Qiita
Ateam Lifestyle x cyma Advent Calendar 2018の12日目は、株式会社エイチームライフスタイルのエンジニア@kazenomachiが担当します。 本稿では、Reactのチャート描画ライブラリRechartsで様々なチャートを出力する方法を紹介していきます。 やりたいこと Reactで、簡単なグラフ（折れ線グラフや棒グラフ）を描画したい できるだけ簡単に分かりやすいコードで書きたい Rechartsとは？ Reactで簡単にSVGチャートを描画できるライブラリです。 他にもチャートを描画することができるライブラリは多くありますが、今回は以下の点を理由にRechartsを選びました。 Reactコンポーネントを使ってReactらしくコードを書ける（読みやすい） ある程度カスタマイズも可能で、レスポンシブ対応も簡単そう 基本編 まずは早速、基本のグラフを書い
データサイエンティストが知っておくべき5つのグラフアルゴリズム - Qiita
こちらの記事は、2019年 8月に公開された『 Data Scientists, The 5 Graph Algorithms that you should know』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 私たちデータサイエンティストは、Pandas、SQL、他のどんなリレーショナルデータベースに対しても、かなり満足しています。 私たちは、ユーザーの属性を列で表現し、ユーザを行として並べることに見慣れています。 しかし、現実の世界は本当にそのようになっているでしょうか？ コネクテッドワールドでは、ユーザーを独立したエンティティと見なすことはできません。 ユーザーはお互いが一定の繋がりをもっているため、機械学習モデルを構築するときに、関係性を含めたい場合があります。 リレーショナルデータベースでは、異なる行（ユーザー）の間でこのような関係性を使用する
BdashというBIツールをリリースしました - hokaccha memo
BdashというアプリケーションをElectronで作りました。 bdash-app/bdash: A simple business intelligence application. 以下からダウンロードしてインストールできます（現状まだMac版だけ）。 https://github.com/bdash-app/bdash/releases ざっくりとこんな感じのことができる。 SQLを書いて保存＆実行できる 結果を元にグラフを書ける gistで共有できる 現状で対応しているデータソースはMySQL、PostgreSQL（Redshift含む）、BigQuery 仕事でRedshiftを使って分析SQLを書くことが増えて、手元ではJupyter Notebookを使ってたんだけど、SQL書いてグラフを書くだけの用途には若干オーバースペックでもうちょっと簡単にできるといいなと思ったのがき
JSグラフライブラリNVD3.jsを使ってはてなブログにハイセンスな株価チャートを表示させる方法 - サラリーマン休日副業で月10万円以上目指すページ
久々にプログラミング系のネタです。 はてなブログにJavaScriptのグラフライブラリであるNVD3.jsを使用し、ハイセンスな株価チャートを表示させてみます。 もちろん、同様の方法で棒グラフ、円グラフ、折れ線グラフ等の基本グラフや、複合グラフ等の高機能なグラフまで簡単に表示させることができます。 １．CSS/ライブラリの読み込み まずはCSSとJavaScriptライブラリを読み込みましょう。 下記ソースをページ上部にコピーします。 <link href="http://cdn.rawgit.com/novus/nvd3/v1.8.4/build/nv.d3.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" char
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にしてあげるだけ。
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ - Shinichi Nishikawa's
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
第8回 WebページにGoogle APIで簡単にきれいなグラフを描く
Googleが提供しているAPIライブラリ「Google API」と聞いてパっと思いつくのは，検索系（Google AJAX Search API）か，地図系（Google Maps API／Google Earth API）でしょう。しかしGoogle APIには他にもいくつか種類があります。今回ご紹介するのは「Google Visualization API」です。Visualizationってなんだろうということですが，実はこれグラフを描画するためのAPI群です。 グラフを作るということだけであれば，Excelのような表計算ソフトを使うのが一番手っ取り早い方法です。しかし，例えばWebサイトの中でグラフを利用しようと思えば，Excelでグラフを作り，これを画像としてキャプチャし，HTMLに貼り付けるという手順を踏まなくてはなりません。実際にIT系の記事では，特にハードウエアのベンチマ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://recharts.org/en-US/