タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた - Qiita
Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartjsの使い方 全体の流れはこんな感じ。 1. インストール 2. コンポーネントを作る 3. コンポーネントを配置する 1. インストール まずはインストール <!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import
こんにちは、虎の穴ラボのH.Kです。 今回はChart.jsで可変の表示要素に対していい感じの色を割り当てる方法をご紹介します。 この記事で解決する課題 取得したデータによって比較対象に当たる要素数が可変になるようなグラフ（Chart.js）に綺麗に色をつける 自動で色を割り振った完成形 Chart.jsとは 簡単にグラフを描画できるライブラリです。 パラメータで受け取った値を元にキャンバス要素にグラフを出力してくれます。 円グラフ、折れ線グラフなど多くの形式で表示することが可能です。 また、自動で縦軸や横軸の値を調整してくれるので、値さえ用意すれば簡単に出力できるのが魅力です。 社内で使用しているツールのグラフ表示に使用しています。 www.chartjs.org 解決方法 早速、解決方法ですが、以下の手法を取ることにより解決しました。 HSL色空間を用いる 要素数から色相の角度を計算し
Railsでシンプルなグラフを扱うならchart-js-rails よりchartkickを使うべし - Qiita
Railsでグラフを扱う方法として chart-js-rails を使った方法を こちらの記事で解説しました。 一方、シンプルなグラフを埋め込む場合においては chartkick を使ったほうが簡単なことがわかったので本記事で解説します。 chartkickとは chart.jsをいい感じにラッピングして、ワンラインでグラフを埋め込めるようにするプロジェクトです。 Rubyに限らず様々な言語で実装されています。 https://chartkick.com/ また、chart.jsだけでなくGoogle ChartsやHighchartsもサポートしています。 chartkickを使ったほうが良い理由 RubyとJavascript間のデータの受け渡しを意識しなくて良い こちらの記事の方法だと、Ruby側で扱う数値を何らかの方法でJavascriptで受け渡す必要がありました。 chartk
Chart.jsをReactにProviderを使用して組み込んだシンプルなサンプル - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー18日目の記事です。 はじめまして、テックタッチアドベントカレンダー12月18日担当のyassanですよろしくお願いいたします。 普段は、テックタッチの管理画面を中心に、フロントエンドエンジニアとして業務に携わっています。 本稿では、業務で使用したChart.jsをReactにProviderを使用して組み込んだ際の備忘録として、簡潔にサンプルコードをまとめていきたいと思います。 Chart.jsとReactの間のデータの流れを中心に取り上げていこうと思います。 Chart.js自身のカスタマイズなどは取り扱いません。 主に扱うライブラリに関して 取り扱うライブラリに関して、念の為の補足をいたします。 React Meta（旧Facebook）が開発したユーザーインターフェイス構築のためのJavaScriptライブラリです。 Chart.js Ja
VSCode + CordovaのエミュレータでChart.js使ってレーダーチャート表示しようとしたらエミュレータ上は表示されなくてハマったので使い方メモ
問題を切り分けないといけないので一旦Chromeブラウザで見てみると描画されています。 エミュレータだから表示されない、、と信じたいので実機で試してみました。 apkファイルを作成します。 cordova build --release Andoroid7.1.1で試したのですがリリース版だとエラーとなったためdebugでapkを作成したら正常にインストールすることができました。 cordova build android レーダーチャートも無事表示できました。ひょっとするとレーダーチャートがエミュレータ画面の範囲外に表示されていたのかな、という感じです。 やっぱり実機で試さないといけないと痛感しました。 Chart.jsのbar（棒グラフ）で縦線を引く bar（棒グラフ）で縦線（基準線）を引くにはプラグインを作成して実現しました。 プラグインの作成方法・登録方法は以下のようにします。 v
JavaScript でグラフ(チャート)を描画するためのライブラリです。 MITライセンスで、商用・私用を問わず無償で利用可能です。 現在(2021年5月)の最新版は 3.2.1。3.x 系は 2.x 系と色々仕様が変わっています。 npmの場合は下記を実行してください。 # npm install chart.js CDNを利用する場合は下記から対象のバージョンと形式を選択し、[Copy Script Tag] でスクリプトタグを張り付けてください。 https://cdnjs.com/libraries/Chart.js 時系列チャート(type: 'time')を扱う場合は、日時ライブラリとアダプタが必要です。 date-fns - オススメ luxon - Chart.js 2.x系にしか対応していないみたい。 moment - 最近は開発が止まってる。 <!DOCTYPE ht
暑い 2020年8月19日、暑い日が続いていますね！テレビやネットでは熱中症のニュースが連日報じられています。自宅にいても、温度と湿度の高さで熱中症になる可能性があるみたいです。 構成 構成図 BME280(温湿度・気圧センサモジュールキット)を使用してobnizで値を取得し、IFTTTを経由しSpreadSheetをデータベースの代わりにしてVue.jsでデータを受けとります。 SpreadSheetにデータ送る こちらの記事を参考にさせていただきました (爆速開発IoT遠隔センサーロガー: obnizからGoogle Spreadsheetにセンサー値を定期的に保存（環境構築不要！汎用性高） API化する SpreadSheetのシートのデータをJSONで取得するため以下の記事を参考にしました。 【Vue.js】さ迷うハロオタがお誕生日カレンダーを作った 途中でつまずきましたが@UhR
Chart.jsの使い方のきほん - Qiita
Chart.jsを使ってグラフの描画 Chart.jsはJavaScriptでグラフを描画するためのライブラリです。 以前少しだけ使用したことがあったのですが、もう一度使い方をおさらいしようと思い、勉強ついでにメモ。 これから使おうと思っている方の参考になればと思います。 https://www.chartjs.org/ バージョン Chart.js 3.9.1 使い方 インストール npmを使用してインストールするか、CDNを利用します。 今回はCDNで。 <head> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script> </head>
概要 Chart.jsでは普通にグラフを作ると画面の幅に合わせて１つのデータ当たりのサイズをレスポンシブに調整して表示してくれます． とても便利ですが，データの量が多いとかなり見づらくなってしまいます． そこでデータ１つ当たりの横幅を固定して画面に収まりきらない分は横スクロールで見えるようにしようと思いましたが，かなり苦労したのでメモを残します．参考になれば幸いです． 完成図 今回は棒グラフが必要だったので，棒グラフを作成しました． 他の種類のグラフは試していませんが，データ構造が同じようなグラフなら上手くいくと思います． 図の下にスクロールバーが描画され，スクロールバーを動かすとスクロールすることができます． (右の方はラベルしか描画されていませんが，値を入れなかっただけなので気にしないでください．） 実行環境 ブラウザ: Google Chrome Chart.js バージョン: 2.
Flask matplotlibを使ってグラフを表示する方法（JavaScriptのChart.jsを使ってグラフを描画） - ふたり暮らし
はじめに 今回はちょっと寄り道してFlaskでグラフを表示してみます。本当はグラフのアニメーションを作りたかったのですが諦めました。あとで調べたところ、JavaScriptを使ったほうが簡単できれいに出来るみたいだったのでそちらも作成してみました。 動作環境 Windows10 Python 3.7.5 Flask 1.1.1 コード test.py from flask import Flask, render_template, make_response from io import BytesIO import urllib from matplotlib.backends.backend_agg import FigureCanvasAgg from matplotlib.figure import Figure import matplotlib.pyplot as plt i
width と height を指定しないときのデフォルト値は width=300, height=150 です。 ブラウザの表示サイズに応じて、グラフの横幅を動的に変えたい場合があります。しかし canvas とレスポンシブの相性はなかなかやっかいな問題があります。canvas の幅を CSS で width: 100%; などと指定してもうまくいきません。ぼやけたりゆがんだりしてしまいます。 CSS で幅と高さを指定したつもりでも、それは HTML で幅と高さを指定するのとは意味が異なります。canvas 要素の描画領域は HTML で指定した値（指定していなければデフォルト値）のままであり、それが CSS でしていしたサイズに引き延ばされて表示されるだけだからです。 canvas の横幅を動的に指定する canvas の表示サイズだけでなく描画領域のサイズも動的に変更するには、Jav
グラフをキレイに見せるコツは、ラベルの表示方法にあることに気がついた、ユゲタです。 グラフの「ラベル」というのは、縦横の値の目安になる値を表示しているアレです。 この画像の赤枠の箇所です。 Chart.jsでは、値がたくさんある場合に、適度に間引いてくれる機能や、長さが隣と干渉する場合に、 角度をナナメにして、文字の重なりを防いでくれる機能がデフォルトでついていますが、 自動的に判断されるため、思ったとおりにならない場合も多いでしょう。 あと、値に対してそれぞれ単位を付与したいという要望も多いため、 今回は、これらをセットしたサンプルを紹介してみたいと思います。 【お断り】 このブログ記事は、Chart.jsの標準的な使い方ができる人が対象です。 Char.jsの基本設定などは、本家サイトのサンプルなどで使える人を対象にしていますので、下記リンクから環境を作ってから本ページを参照ください。
![[Chart.js] X軸とY軸に表示されているラベルの文字列をカスタマイズする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/5599eb3677bb8a363e1cd7d1f2d0114b5cae8b06/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEj2JUy0mkcE9Fh-PqSVhnIOTcCIS6Nz4tW_0-yVJUyZpH19U4I1JFGlRAQyGFgUD5MbwTXybtHv2ko_vqJMQ5D5lQf_tmCf4OvyHqE8MEgHDmDSPgcQSw-15fpnccUnDDsccYD81TBhnGLCCfNkTZupEaWJH9pt13ZpiNAR4dZefwaPdYVqYsk-rA1G%2Fw1200-h630-p-k-no-nu%2F1624920983_0.jpg)
JavaScriptライブラリのChart.jsを利用するとブラウザ上に美しいグラフを簡単に描写することができます。 日々の業務活動から発生したデータを保存している外部サービスやバックエンドから取得したデータを使ってグラフを描写したいという要望もあるかと思います。そのような時にどうやって情報を取得し、グラフに描写するのか知りたいと思った時に活用できるのが本文書です。 axiosを利用しAPI経由で外部サービスまたはバックエンドからデータを取得し、vue.jsを使って取得したデータを処理し、Chart.jsでグラフを描く手順を確認します。 Chart.jsでグラフを描くためには、グラフの元になるデータの準備またaxiosやvue.jsといった技術の基礎知識も必要となります。 Chart.js単体よりもVue.js+Axiosとの組み合わせた使用方法の説明に重点を置いているためChart.js
棒グラフの単純設定 単一系列の棒グラフを例にして代表的な設定機能を示します。 必要最小限の設定しかしない場合、次の記述で右上図が得られます。 多様な設定 これではあまりにも素っ気ないので、逆に多様な設定をした例を示します。 下のソースコードで、右下のグラフが描かれます。通常はこの程度の機能で十分でしょう。 複数の系列を並べた棒グラフの場合は、次のように datasets に並べるだけです。 datasets: [ { label: "系列Ａ", // 系列名 data: [10, 20, 5, 15, 10], // 系列Ａのデータ backgroundColor: "red" // 系列Ａの棒の色 }, { // ┐ label: "系列Ｂ", // │ data: [ 5, 10, 10, 5, 8], // │系列を増やす backgroundColor: "blue" // │ }
Chart.jsで回帰直線を描画 - Qiita
はじめに RやPython+matplotlibでは簡単に描画できる回帰直線を、JavaScriptのグラフライブラリ「Chart.js」で描画します。 以下は、散布図を描画するデータから回帰式を求めて、回帰直線を描画するサンプルです。 サンプル <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>cahrt.jsで回帰直線を描くサンプル</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script> </head> <body> <!-- グラフ描画エリア設定 --> <div style="width:100%">
前々からやってみたかったのですが、ふと思ってつくってみました。手法はntp系の監視と同じ流れになります。なぜこの方法かというとターゲットのストレージ(flash,md)が限られていて、RRDtoolとかを動かすのが難しいためにそうしています。 REALTEK社製EthernetSwtichチップのRTL8366SRのMIBを表示してみます。 MIBを拾うmrubyスクリトは以下になります。merbgemsのmruby-etherswichを使っています。 #!/usr/local/bin/mruby # RTL8366SR MIB # # 0 IfInOctets # 1 EtherStatsOctets # 2 EtherStatsUnderSizePkts # 3 EtherFregament # 4 EtherStatsPkts64Octets # 5 EtherStatsPkts6
プロジェクトセットアップ 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
チャート種別。'line'(線チャート), 'bar'(棒チャート), 'radar'(ラダーチャート), 'doughnut'(ドーナッツチャート), 'pie'(パイチャート), 'polarArea'(鶏頭図チャート), 'bubble'(バブルチャート), 'scatter'(散布図) のいずれかで指定。
ESP32：Chart.jsを使ったグラフ表示公開講座(春夏)「AI/IoTセンサのしくみを知ろう」の補足です。 ESP32のウェブサーバ上で，センサで取得したデータをグラフ表示します。グラフの描画には，Chart.jsというグラフ描画用javascriptライブラリを使用します。グラフの更新には，WebSocketプロトコルを使用して，リアルタイムでセンシングしたデータの表示を行います。 1．ファイルの準備まず，次のライブラリをArduinoにインストールし，必要なファイルを準備します。 <インストールするライブラリ> Arduinoライブラリに追加 arduinoWebSockets , elapsedMillis <ダウンロードするファイル> dataフォルダ内に配置し，ESP32 Sketch Data Uploadにより書き込み Chart.min.js (画面の下の方：Ch
下記画像を見て「ぴん」とくる方むけの記事です。 2020/11/3 追記 <app> タグで囲まれたときの問題について追記しました。 下記 JSFiddle ページにデモがあります。 https://jsfiddle.net/oktopus1959/w4gan9tk/23/ 適当にソースを修正して「Run」を実行すると、その修正を反映した表示がされます。いろんな値をいじって、表示がどのように変化するかを見るのも面白いですよ。 また、左右のY軸を固定表示したグラフを使用したサイトも作成しました1。 https://ncov.oktopus59.net/ 基本アイデア 「参考」にも書きましたが、 Y軸のイメージを別の canvas にコピーして元のイメージと重なるように配置する です。 ソースコード Chart.js, JavaScript, CSS にある程度慣れている方なら、コメントを読め
グラフ画像をただ置いておいても、円グラフはただの丸、棒グラフもただの棒の並びのように見えてしまい、なかなか注目されないものです。 そこでグラフを動かすchart.jsで、グラフをニョキニョキっと動かし、視認性UPに繋がるようにしてみました。 しかし単純にサンプルコードから引っ張って来ても動かなかったり、参考ページを見て追加したことなど、カスタマイズした項目もありますので、合わせてご紹介したいと思います。 公式サイトからDL 公式サイトはこちら 上記からGit hubへアクセスして、chart.jsをDLし、任意のjsディレクトリにUPしておきます。 コードを記述 HTMLファイルのscriptタグまたは外部jsファイルの中身に、以下を記述します。 デモコードよりもさらに記述を追加していますが後に紹介します。 //スクロールしたとき、画面中央で発火して動くようにする var chartEl1
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[アップデート] Monitoring Query Language (MQL) が非推奨へ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/122edd06980ab8b90d79e14297d837071229f8aa/height=288;version=1;width=512/https%3A%2F%2Fdevio2024-media.developers.io%2Fimage%2Fupload%2Fv1721797071%2Fuser-gen-eyecatch%2Fvlqwfkkeho0e2xchoy4d.png)
Chart.jsでいい感じの色を自動で割り当てる！ - 虎の穴開発室ブログ
とほほのChart.js入門 - とほほのWWW入門
chart.jsで自宅の温湿度を可視化してみた - Qiita
Chart.jsで横スクロール可能なグラフを作る - Qiita
Chart.js で縦幅を固定、横幅のみレスポンシブに対応する | キュア子の開発ブログ
[Chart.js] X軸とY軸に表示されているラベルの文字列をカスタマイズする方法
Chart.js+Vue.js+Axiosを使ってグラフを描写しよう | アールエフェクト
Chart.jsによる棒グラフ作成＜Chart.js＜Javascript＜木暮仁
chart.jsでsnmp（おうちでもsnmpしませんか？） - Qiita
React/TSでChart.jsやってみる | DevelopersIO
とほほのChart.js入門 - とほほのWWW入門
ESP32: Webサーバ上でリアルタイムグラフ表示(Chart.js)
Chart.js でY軸を表示しながらグラフを横スクロールする【デモページあり】 - Qiita
chart.jsでアニメーションするグラフを作ってみた | デザインスタジオドアーズ
blog.goo.ne.jp/aburatubo101
w.atwiki.jp
kinebiotoriyose.xblog.jp
ameblo.jp/hamakiyo-2912
dxmagazine.jp
sayuri0.ub.geo.jp