コンピュータ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で棒グラフを作ったらこんな感じになりました。これはひどい。ということで、ラベルの見栄えをよくするために、次の２点を施します。1. 10文字を超えたら2行に分ける2....
コンピュータFuelPHPでDBのデータから作った図表を表示する
img{border: 1px solid #000;}.small-frame{width: 50%;}概要DBのデータから図表を作成して表示するWebページを、FuelPHPで作成しました。自分用のメモとして記事に残します。前提知識Fu...
コンピュータ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"> 要素をクリックしたときに描画したい。バージョンChart.js 2.1...