Chart.js

コンピュータ

Chart.jsの散布図で、データを一つずつプロットする

Chart.jsの散布図で、データを一つずつプロットする方法をご紹介します。横軸が時間のデータではアニメーションにする必要性を感じませんが、媒介変数表示の場合などは時間に沿ってプロットすることで理解しやすくなる気がします。
コンピュータ

Chart.jsで(x, y)以外の変数名で計算したデータをグラフに描画したい

物理法則に従う運動の時間発展を計算し、時間t-位置x のグラフとしてプロットしたいです。実際に試したらうまく描画されませんでしたので、その後に改善した点をご紹介します。
コンピュータ

Chart.js で指定した横軸の範囲を塗りつぶす

Chart.js で指定した横軸の範囲を塗りつぶす方法をご紹介します。
コンピュータ

Chart.jsで、横軸の閾値を境にデータの色を変える

年ごとの時系列データがあったとして、平成元年以降は色を変えて強調したいというような場合を想定した処理について、ご紹介します。
コンピュータ

Chart.jsのグラフをボタン押下時に更新する

概要 縦軸が金額になるグラフを作っていて、単位を千円とか百万円とかに切り替えるボタンが欲しくなりました。両方作って表示すればいいのですが、Chart.jsの学習がてらやってみました。 作成したサンプル 更新ボタンを押す度にAの値が2倍になる...
コンピュータ

Chart.jsの描画処理を関数で共通化して、データセットを引数にする

/img{ border: 1px solid #000; width: 50%; }/ 概要 Chart.jsで同じページに複数の箇所にグラフを描画したいとき、Optionsが同じであればグラフごとに描画処理を書くと冗長になります。 ...
コンピュータ

Chart.jsでグラフに表示する長いラベルを折り返して表示する

img{ border: 1px solid #000; } 概要 Chart.jsで棒グラフを作ったらこんな感じになりました。 これはひどい。 ということで、ラベルの見栄えをよくするために、次の2点を施します。 1. 10文字を...
コンピュータ

FuelPHPでDBのデータから作った図表を表示する

img{ border: 1px solid #000; } .small-frame{ width: 50%; } 概要 DBのデータから図表を作成して表示するWebページを、FuelPHPで作成しました。自分用のメモとして記事に残し...
コンピュータ

chart.jsでグラフの横軸を円周率単位の表示にする

概要 chart.jsで三角関数(sin x,cos x)のグラフを描くときに、横軸のラベルを 0, 1, 2, 3, ... ではなく 0, 0.25π, 0.5π, 0.75π ... と表示したかったので試してみました。 結果のイメー...
コンピュータ

Chart.js で canvas 要素にグラフが表示されない

概要 Chart.js で 2箇所の <canvas> 要素にグラフを描画しようとしたけど、 どちらも表示されない。。 ちなみに、<button type="button"> 要素をクリックしたときに描画したい。 バ...
タイトルとURLをコピーしました