[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
データ視覚化のデザイン #1｜Go Ando / PREDUCTS / THE GUILD
こんにちは、THE GUILDの @goando です。 私はTHE GUILDの中でもデータを扱う仕事を中心に活動しており、「UXの改善をデータでサポートする」をミッションに取り組んでいます。 ざっくり言うと、THE GUILDのクライアント企業が運営するサービスのログを分析してユーザーの行動傾向からUXの改善点を見つけ出したり、マーケットの市場リサーチを通じてサービスの戦略の策定を支援したり、と言った内容です。 こうした活動を通じて、データ分析の結果をグラフ等のレポートに落とし込むという事を数多く行ってきました。 試行錯誤を繰り返しつつ、データをどのようなデザインで視覚化するとメッセージが伝わりやすいのか、逆にどういう点に気をつけないと誤解を与えやすいのか、といったノウハウを少しずつ蓄積してきました。 データ分析を台無しにするダメグラフかく言う私もかつて、そのグラフから何が言いたいのか
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d
誰が見ても一瞬で伝わるレポート資料の作り方！散布図の使い方をマスター
株式会社ロックオン、マーケティングメトリックス研究所の松本です。 これまで「棒グラフ」「円グラフ」「折れ線グラフ」について説明しました。これらを使いこなせれば、レポート表現に困ることはまずありません。 これからは、少し難易度は上がりますが、使えるとカッコ良くて表現の幅が広がるグラフを紹介していきます。 今回は「散布図」の使い方を完全マスターしましょう。 何を最も伝えたいときに散布図を使うのか？ 散布図は、項目同士の「繋がり」を表すに用います。 項目同士の関係を感覚的に把握できることが、散布図の特徴だと言えます。 例えばポジショニングマップも散布図の1つです。 横軸と縦軸で当てはまった製品同士の距離から「YとZの隙間が広いから、それを埋める製品Aを作ろう」「競合Yを潰すため、同程度の音質の製品Zαを作ったほうがいい」と議論が行われます。 散布図を用いるのは、全体を俯瞰して項目同士の「広がり」
料金表をわかりやすくデザインするコツ。実例やレスポンシブ対応サンプルも！
料金表をわかりやすくデザインするコツ。実例やレスポンシブ対応サンプルも！サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 料金表をデザインするときのポイント1. プランの違いをわかりやすくまずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名： ブロンズ・シルバー・ゴールド・プラチナマイクロ・スモール・ミディアム・ラージベーシック・アドバンス・プロGitHubでは個人
JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能
JavaScriptのグラフライブラリを52種類も集めた「JavaScript Graphs」。グラフの種類や依存ライブラリ、価格などで絞り込み可能 数年前に自作のアプリケーションをJavaScriptで作ったときにグラフ機能を実装しようとして、いくつかのグラフ用のJavaScriptライブラリを探して試したことがありました。JavaScriptライブラリを探すのは、それなりに手間がかかるものでした。 もちろん当時からJavaScriptのグラフライブラリの情報をまとめたサイトはいくつかありましたが、最近登場した「JavaScript Graphs」は52種類ものライブラリを集めて、ビジュアルに一覧できるようにしたサイトです。 さまざまな条件で絞り込みができる便利な機能も備えており、条件としては折れ線グラフやドーナッツグラフに対応したものなどグラフの種類、無料や有料、非商用のものなどの価格
誰が見ても一瞬で伝わるレポート資料の作り方
株式会社ロックオンの松本です。 データを解りやすく伝えるのにもっとも良い手法が「グラフ（絵を用いた）表現」だと言われています。 だからだと思うのですが、最近はBIツール界隈も急速に盛り上がりつつあります。BIツールで作成したグラフを用いたプレゼンは「データプレゼンテーション」と言うそうです。 一方で、もっとも伝えたいことを、もっとも解りやすく伝えるには、どのような「グラフ表現」をすれば良いのか、ということを簡単にまとめたサイトは少ないことに気付きました。 無ければ作ろう！ということで、今回からしばらくはグラフ表現の「ポイント」をお伝えしていきます。 今回は、「棒グラフ」の使い方をを紹介しますので、ぜひマスターしましょう。 何を伝えたいときに棒グラフを使うのか？ 棒グラフは複数の項目の「量」を比較するために用います。大きい・小さい、を感覚的に把握できることが棒グラフの特徴だと言えます。 棒グ
Google Drive スプレッドシートの本気で使える裏ワザ＆アドオンまとめ | Ledge.ai
ども お久しぶりな中村です。 さて、今回は以前書いたドライブドキュメントネタの続編みたいな感じですが、皆さんも（多分）大好きなGoogleスプレッドシートの裏ワザ＆アドオンのまとめとなります。 なんとなーくエクセルの代わりになるよねーくらいでしか使ってない人は確実に損してると思うので、ぜひぜひ使い倒してみてください。 レポート瞬間生成！満を持して登場したGoogleアナリティクス公式アドオンGoogle Analytics add-ons もはや説明の必要は無いでしょう。ついに出たんですよ…Google Analytics公式のスプレッドシートアドオンが。 完全無料で！Google Analyticsのレポートを！一切の機能制限なく！スプレッドシート上で生成＆管理できるようになったんですよ！ 連携したら最初に アドオン＞Google Analytics＞Create New Reportで
個人的に気に入ってる決算説明会資料（ネット系企業9社）｜インターネット界隈の事を調べるお
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。 皆さんご存知無いかもしれませんが、僕は図とかグラフが好きなんです。決算説明会資料も「図がきれいか」とか「カラーリングが好みか」などの基準で見てしまったりします。他に知りたい情報（例えば事業やデバイス別売上等）が載ってたりすると嬉しかったりします。そんなわけで短信よりも説明会資料を中心に見ている僕がいくつかオススメの決算説明会資料を紹介します。個人的な好みなのでご容赦ください。 1.スタートトゥディ http://www.starttoday.jp/?p=9613 『ZOZOTOWN』や『WEAR』を運営するスタートトゥデイ。ファッションEC事業の会社だけあって昔からセンス溢れる資料で好きです。同系色でまとめてスタイリッシュ。図もわかりやすい。 2.エニグモ http://www.
孫正義社長を「10秒」で納得させる資料作りの秘訣 - 日本経済新聞
ビジネスにおける資料作りに、強いこだわりを持つ経営者がいる。ソフトバンクの孫正義社長だ。そのこだわりは、独自の経営哲学にもつながる重要なもの。ここでは、「孫正義の資料の鉄則」を見ていこう。「数字の裏づけのない資料の価値は、ゼロに等しい」日本を代表する経営者の1人、ソフトバンク孫正義社長は、ビジネスにおける「数字」に対しての嗅覚が人一倍強く、わずかな"異常値"も敏感に見抜く。おかしいと感じた数
突出したグラフは途中を省略するのがマナーです
「そうなのだ。この日にイベントを仕込んだのだよ。そしたらこんなに客が増えた。これを根拠に別のイベントを客に売り込もうという算段だ」 なるほどね。しかし10月13日があまりにも突出し過ぎていて、他の日の違いがよくわからんな。通常こういう場合、突出した棒の途中を省略するもんだぜ。 「Excelにそんな機能があるのか？」 うーん、残念ながらないね。実際省略しようと思うと手作業で実行しなければならない。ちょっと貸してみな。実際にやってみよう。
美しいグラフで業績チェック!! 業績比較、グラフ化サービス「PositionStrategy」
下のボタンを押してみて下さい。自分の勤務先企業や業界平均と好きな企業の業績や企業情報を自由に比較することができます。
雑誌は、図版だけを切り抜いて捨てる | web R25
インターネットで情報が手に入る時代になっても、雑誌のようにコンパクトに情報がまとまっていると、とても便利です。ネットだといろいろなサイトを渡り歩かないと集まらない情報も、雑誌であれば見開き2ページにしっかり収まっていたりします。情報収集の時間短縮ということからも、雑誌におおいに助けられています。 そんな雑誌の利便性を高めているのが、実は図版。年表にまとめられていたり、登場人物の関係が図示されていたり、新製品の特徴が表に整理されていたりしているので、複雑な情報も簡単に理解できます。 せっかく雑誌を購入したのなら、下記のような情報を図解した部分だけでも、切り取って手帳に貼っておきましょう。実は図解を見ると、どんな内容の記事だったかを思い出すきっかけになるので、あとから振り返るのにも非常に便利。雑誌の記事を丸々保存しておかなくても、大丈夫なのです。 【切り取っておくべき図版】 ・できごと
【完全版】インフォグラフィックとは？作成のコツや参考サイトを紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGの岩上です。 インフォグラフィックは情報やデータを視覚的に表現したいときに用いられ、ごちゃごちゃしているものをシンプルでわかりやすく伝えるために用いられます。 今回は、インフォグラフィックとはどんなものなのか、具体例や作成のコツまで解説していきます。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は、2013年9月27日に公開された記事を再編集したものです。 インフォグラフィックとは インフォグラフィック（Infographic）とは、わかりづらいデータや情報を、図やイラスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【保存版】ぜひ週末に観てほしい！傑作から問題作まで「個人的おすすめ映画23選」
Highcharts Demo Gallery
Chart.js
「ベートーヴェンやバルザックは、1日をこう過ごした」
PC