[chart.js] タグが付いた質問
Chart.js は、JavaScript で柔軟にグラフを表示するためのライブラリです。質問をする場合、Chart.js のバージョン情報を質問文にお書きください。
17 件の質問
0
票
1
回答
1,087
閲覧数
ChartJSのTooltip callback関数が動作しません。
ChartJSを使って棒グラフの表示を行っております。
ツールチップの内容を編集するため、tooltipsプロパティにcallbacksを定義しましたが、
ツールチップの中身が変わりません。原因はお判りでしょうか。
▼実行環境
OS：Windows10
ブ���ウザ：Chrome 90.0.4430.93
ChartJS：ver2.8
var ctx = document....
- 11
0
票
1
回答
2,770
閲覧数
chart.js で TimeScale の使い方
横軸に連続量を扱いたいです
本当は扱いたいのは日付ではないんですが表示間隔を自由に変更できるのが
タイムスケールしかなさそうなので
timestamp の秒数にキャストして表示だけいじれば何とでもなるかなと思い、
とりあえず Time スケールを表示させようとしました
<script src="https://cdn.jsdelivr.net/npm/chart.js"><...
user35303
0
票
1
回答
7,981
閲覧数
chart.js で x 軸の stepSize を変更する方法
x 座標の間隔を調整したいのですが
stepSize オプションが y 軸にしかききません
callback メソッドで表示は変えられるみたいなのですが
横軸が 100 とかになると勝手に 3 ずつとかステップされるので
その倍数以外の 5 ずつとか 10 ずつとかに変更することができません
方法はないでしょうか
<script src="https://cdn.jsdelivr....
user35303
1
票
0
回答
557
閲覧数
chartjs-plugin-zoomのpanが正しく機能しないのはなぜでしょうか？
前提・実現したいこと
chartjs-plugin-zoomを使��て以下のようなコードで、グラフを作りました。
https://codepen.io/nemurino-kai/pen/QWNexKJ?editors=0010
chartjs-plugin-zoomのgithubにあるLive Codepen Demoを改変して作成しました。
発生している問題・エラーメッセージ
「...
- 11
0
票
1
回答
2,559
閲覧数
chart.js レーダーチャートの目盛表示間隔を調整したい
具体的には、一番最初の刻みをやや小さくしたいです。何かいい方法ありますか？
chart.jsバージョン 2.9.3
scale: {
ticks: {
min: 0,
max: 5,
stepSize: 1, ← 一番目の間隔を0.5ほどにしたい。他は１のままで
display: false,
}...
0
票
1
回答
428
閲覧数
Chart.jsのラベルと値が対応していない問題を解決したい
解決したいこと
Chart.js上で表示される値が、実際にDBに格納されているラベル・値共に対応していないため、正しいラベル・値を表示させたい
イメージ
環境
・Ruby：2.6.5
・Rails:5.2.4.3
・DB：PostgreSQL
試したこと
logger.infoでどんな値が格納されたのか確認したのですが、Controllerの意図した順番ではありませんが、正しい内容（＝ラベル・...
0
票
1
回答
743
閲覧数
Railsでグループ単位で値を集計（SUM)し、各グループごとの集計結果を表示させたい
実現したいこと
Railsでグループ単位で値を集計（SUM)し、各グループごとの集計結果をControllerで変数として定義したい
※その後、定義した変数について、gem gonを活用してJavaScriptに定義した値を加える予定です。
イメージ
環境・条件
・Ruby：2.6.5
・Rails:5.2.4.3
・DB：PostgreSQL
・DB設計 ※詳細は下記コード
親：...
0
票
1
回答
1,971
閲覧数
2本の折れ線グラフのツールチップのTitleに、それぞれ別の文字列を表示させたい。
2本の折れ線グラフは今年の売上と去年の売上を表示しています。
$xlabelThis = '20/03','20/04','20/05','20/06';
$xlabelLast = '19/03','19/04','19/05','19/06';
一方の折れ線グラフはPHPで宣言した $xlabelThis をそのままツールチップのTitleとして用いますが、もう一方の折れ線グラフは $...
- 1
1
票
0
回答
713
閲覧数
Rails のデータの値を変数として Chart.js で円グラフに代入して表示させたい
実現したい事
Chart.jsの円グラフの各ラベルの値を、Railsから取得し円グラフに反映させたい
※１対多の関係にあり、実際の値は、親ではなく子モデルにあります
環境
・Ruby：2.6.5
・Rails:5.2.4.3
・DB設計 ※詳細は下記コード
親：Recordテーブル
子：Practiceテーブル
試した事
RailsデータをJSに反映させるため、gem ...
0
票
1
回答
637
閲覧数
Javascriptの関数が2度以上実行できない
Javascript でfunction関数でチャートを定義し、複数チャートを記載しました。
チャート以外の関数は、複数記載しても動作しますが、添付のチャート関数は、複数記載しても複数の動作が確認できませんでした。
理由に関して、ご指導頂けませんでしょうか。
index.html_case16
<!DOCTYPE html>
<html lang="en">
...
- 49
0
票
1
回答
961
閲覧数
Chart.jsを使ったリアルタイムの線グラフのY軸を逆にする方法を知りたい
こんにちは。
JS初心者なのですが、Chart.js、chart.js streaming、moment.jsを使ったリアルタイムグラフの線グラフの描画が、下記の写真のように、グラフが上から下に流れていくのですが、それを逆に下から上に流したいのですが、どうすれば良いでしょうか。
下記が私が書いたコードです。
var chartColors = {
red: 'rgb(255, 99,...
- 5
1
票
0
回答
261
閲覧数
chart.js上でインタラクティブに図形を表示したい
お世話になっております。
chart.js v2.7.2 を使っています。
その際、任意の位置にfillrect()などで描画をオーバーレ��したいのですが、
インタラクティブに動作させることが出来ません。
見よう見まねで以下のように実装してみましたが、図形は描画されるものの、
変数(posZoomLeft等)を変更しても、関数が再評価されないので、値が更新されません。
Chart....
- 33
2
票
1
回答
7,659
閲覧数
chart.jsのtick表示を間引きたい
お世話になっております。
webページ上に線グラフを表示するためにchart.jsを使っています。
その際、Y軸のtick表示を間引きたいのですが、グリッド線は残しておきたいのです。
出来ればchart.jsそのものは弄る事無く実現したいのですが、
何か方法があればアドバイスいただけませんでしょうか。
よろしくお願いします。
-----補足-----
使用しているchart....
- 33
0
票
1
回答
6,581
閲覧数
phpで取得したDBの値をchart.jsのデータに使用したい
はじめまして。
javascriptの初心者なのですが、グラフを比較的容易に描画できるライブラリとしてchart.jsを見つけ、簡単なサンプルを作ってみました。
実践的に使用する場合、DB上に格納されている値を、グラフの値にセットすることが必須要件になると思うのですが、phpで取得した配列の値をchart.jsに渡す方法が良く判りません。
検索すると、ajaxというキーワードが出てくるのですが、...
- 1