3
Chartというオブジェクトを初期化する際、canvasという要素のoffsetWidthやoffsetHeightが必要ですが、pagebeforeshowというイベントが引き起こされる時にはjQuery Mobileのスタイルによってdisplayがnoneなので、ブラウザはoffsetWidthやoffsetHeightを計算できません。
ですから、pagebeforeshowをpageshowに置き換えると、正しく動くと思います。
2
関数呼び出し test_case() は2回実行されています。「関数が2回呼び出されたこと」をどのように確認していますか? もし「グラフが2つ描画されない」ことから疑っているのであれば、それは間違いです。たとえば test_case の関数定義の中に console.log を仕込めば、2回出力されていることが分かります。
グラフが2つ描画されないのは、どちらの呼び出しでも id が myLineChart の canvas に描画しているからです。
2
aggregate_result メソッドを次のように書き換えれば、指定ラベルの順序どおりにグラフが描画されるようになるのではないでしょうか?
def aggregate_result
# 1. ログインユーザーの親関係にあるRecordテーブルと、
# 子関係にあるPracticeテーブルの全てのデータを取得する。
# 2. 取得したデータから、Practiceテーブルのpractice_timeカラムにある
# データを選択し、practice_itemごとにデータを分類し、
# practice_timeカラムの合計値を計算する。
# 3. その合計値を、@recordオブジェクトとして表示する。
# MEMO: item_order の順序を参考に Hash ...
1
Uncaught Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided
というようなエラーがライブラリ内ででて表示されません
Chart.js 3.xのマイグレーションガイドに記載がありますが、momentに直接依存していたコードが外れたので、adapterが必要になりました。
(自分の好きな日付ライブラリと組み合わせられるようになりました)
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#setup-and-installation
moment ...
1
おそらく今回のケースであれば、stepSizeと一緒にmaxTicksLimitを設定すればよさそうですが、データに応じて「自分が思った通り」に表示するには、グラフのデータ(labels, datasets)からこれらの値を適切に計算する必要があるかと思います。
質問のコードでx軸を2毎(1, 3, 5, ...)に表示する場合、一例として以下の様になるかと思います。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="640" height="480"></canvas>
<script>
const step = ...
1
Chart.js Tooltip Callback
や サンプルページを見るとわかりますが
Tooltips の callback の中で タイトル等を書き換える事ができます。
改造したところは
var xlabelThis = [ '20/03', '20/04', '20/05', '20/06'];
var xlabelLast = ['19/03', '19/04', '19/05', '19/06'];
var titles = [xlabelThis, xlabelLast];
tooltips: {
callbacks: {
title: function (tooltipItem, data) {
var title = titles[tooltipItem[0]....
1
結論からいうと、現在リリースされているchartjs-plugin-streaming 1.7.1では、ticks { reverse: true }に対応していないため、できないようです。
1.8のリリースを待つか、reverseの対応が入っているmasterをビルドして利用するかの2択があるかと思います。
https://github.com/nagix/chartjs-plugin-streaming/issues/51
https://github.com/nagix/chartjs-plugin-streaming/blob/55e48bfc5e6675956f68aa81ed3b6020443d332c/src/scales/scale.realtime.js#L248-L250
1
ticks の callback を使うとラベルの書式を変更することができるので、これを使うとたとえば奇数番目のラベルだけ消すといったことができます。
callback: function(value, index, values) {
if (index % 2 === 1) {
return "";
}
return value;
}
以下は Chart.js 2.7.2 を使った実装例です。
var ctx = document.getElementById("sampleChart").getContext("2d");
var config = {
type: 'line',
data: {
labels: [...
1
JavaScript における変数のスコープと初期化の方法に注意してください。変数 cells がどこで定義されていてどこで代入されているのかが不明瞭なコードになってしまっています。
具体的には、表を更新する onRefresh の部分で CSV を読み込むために csv2Array() を呼び出していますが、この結果の戻り値はどこにも代入されていません。また、この関数のローカルスコープでは変数 cells が定義されていない場合があります。同様に、csv2Array 関数の中における変数 cells の扱いにも注意してみてください。
更に、XMLHttpRequest を使う際には、send する前にイベントリスナを設定する必要があることにも注意してください。
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります
関連するタグ
chart.js × 17javascript × 12
ruby-on-rails × 3
ruby × 3
php × 2
jquery × 1
node.js × 1
json × 1
postgresql × 1
jquery-mobile × 1