Chart.jsでいい感じの色を自動で割り当てる！ - 虎の穴開発室ブログ

2019/12/13 12 users 描画 グラフ 穴開発室ブログ 穴ラボ 課題

こんにちは、虎の穴ラボのH.Kです。 今回はChart.jsで可変の表示要素に対していい感じの色を割り当てる方法をご紹介します。 この記事で解決する課題 取得したデータによって比較対象に当たる要素数が可変になるようなグラフ（Chart.js）に綺麗に色をつける 自動で色を割り振った完成形 Chart.jsとは 簡単にグラフを描画... 続きを読む

いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた - Qiita

2019/09/22 66 users Qiita TypeScript 備忘録 Nuxt.js 推移

Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartj... 続きを読む

JavaScript のグラフライブラリ比較 - 私達がChart.jsからHighchartsに乗り換えた理由 - - WILLGATE tech blog

2018/03/20 51 users Highcharts 要点 一目 利点 グラフ

2018 - 03 - 20 JavaScript のグラフライブラリ比較 - 私達がChart.jsからHighchartsに乗り換えた理由 - はじめに 新卒2年目（もうすぐ3年目！）のエンジニア、宮西です。 現在、私が開発に携わっているプロダクトでは、グラフを使って様々なデータを表示しています。 グラフ化の利点は、一目で要点を伝えられるところ。 開発中のプロダクトは分析系のサービスであるため... 続きを読む

レスポンシブ対応！Webサイトにグラフを表示できるJavaScriptライブラリー3つ | Webクリエイターボックス

2017/11/17 71 users グラフ ドキュメント レスポンシブ対応 サンプル Webサイト

2017年11月17日 JavaScript グラフを必要とするWebサイトは限られるかもしれませんが、いざという時に知っておくと便利なグラフ作成用JavaScriptライブラリー。意外とレスポンシブ対応のものが少なかったので、対応しているものを集めてみました。 1. Chart.js 公式サイト ｜ サンプル ｜ ドキュメント ｜ GitHub Chart.js はグラフ作成用JavaScrip... 続きを読む

鮮やかなグラフを簡単に描画！JavaScript「Chart.js」を使った動的なグラフ・チャートの作り方｜ferret [フェレット]

2017/01/26 49 users Ferret Twitter フェレット 描画 グラフ

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。 >> 著者詳細はこちら グラフ を使うと、あらゆる要素が客観的に比較できるので、問題分析が容易になったり、根拠を示しやすくなります。最近では情報やデータ... 続きを読む

reactjs - React.js + Chart.jsでインタラクティブなグラフを書く - Qiita

2015/07/14 37 users Qiita reactjs RECORDS React.js

# React.DOMの記述を省略するための変数。 R = React.DOM # メインの部品 @MovingRecordsApp = React.createClass getInitialState: -> records: @props.data getDefaultProps: -> records: [] ... # グラフと額縁のテンプレート chartsPanel: -> R.di... 続きを読む

Hubot にグラフを描かせてみた (PhantomJS + Chart.js => PNG 画像化) :: yulii.net

2014/11/03 13 users PhantomJS Hubot canvas Heroku

2014-11-01Hubot を使ってグラフ画像を生成するスクリプトを作ってみました。Heroku + PhantomJS + Chart.js で動きます。PhantomJS + Chart.js => PNG 画像化ざっくりと動作内容をまとめると子プロセスを生成し、PhantomJS を起動PhantomJS でHTML ドキュメント (canvas) を生成Chart.js を使って ca... 続きを読む

絶対まねしたい！Chart.jsを使ってフラットデザインぽいグラフを作る方法 | startapp

2013/07/22 529 users ドーナッツ セグメント startapp CSS 円弧

Chart.jsというのが流行っているみたいなので、もうちょっとフラット感がでないものか、カスタマイズに挑戦してみました。Chart.jsの使い方などは、LIGさんの記事を参考にしてください。 ドーナッツ これを何個か並べればかなりフラット感が出ますね。外側の青い部分のみをChart.jsで描画し、それ以外はCSSで調整しています。2つ目のセグメントを背景色で塗れば、円弧のように見えます。 ※ ド... 続きを読む

Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG

2013/07/17 274 users canvas ハルエ グラフ 株式会社LIG デザイナー

こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛... 続きを読む

Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG

2013/07/17 28 users canvas ハルエ グラフ 株式会社LIG デザイナー

こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛... 続きを読む

円や棒グラフをサポートしたCanvasによるグラフライブラリ「Chart.js」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/03/29 36 users CHART グラフライブラリ canvas 羅列 ライブラリ

Chart.jsはHTML5/Canvasを使ったグラフライブラリです。Web上で管理画面を提供する場合必要になるのがレポートです。そこにはただの数値の羅列だけでなく、グラフがあるとインパクトが違うでしょう。そこで使ってみたいライブラリとしてChart.jsを紹介します。 折れ線（曲線）グラフです。 棒グラフ。 レーダーチャート。 円のエリアグラフ。 円グラフ。 ドーナッツチャート。Chart.j... 続きを読む

使い勝手が良さそうなHTML5ベースのグラフ描画ライブラリ『Chart.js』 | IDEA*IDEA

2013/03/18 158 users IDEA グラフ描画ライブラリ 使い勝手 HTML5ベース

なんだか便利そうなのでメモ的にエントリー。HTML5というかCanvasを使ったグラフ描画ライブラリです。 ↑ 基本的なものから・・・。 ↑ こういったものまで6種類をサポート。 ↑ マークアップも素直な感じです。 Google Chart Toolsもいいですが、シンプルにローカルでごにょごにょというときもあるかと思いますので覚えておいてもいいですね。詳細＆ダウンロードは以下からどうぞ。 » C... 続きを読む

Chart.js | HTML5 Charts for your website.

2013/03/18 726 users

Easy, object orientated client side graphs for designers and developers DocumentationDownload 6 Chart types Visualise your data in different ways. Each of them animated, fully customisable and look gr... 続きを読む