質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Q&A

解決済

1回答

2881閲覧

chart.jsでグラフのY軸maxが固定されません

delsol

総合スコア20

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

0グッド

0クリップ

投稿2022/02/18 00:51

積み上げグラフと棒グラフと折れ線グラフをまとめて表示させています。
maxを指定しても固定されません。なにか、記述が抜けているのでしょうか?

<script> window.onload = function() { ctx = document.getElementById("canvas").getContext("2d"); window.myBar = new Chart(ctx, { type: 'bar', data: barChartData, options: complexChartOption }); }; var barChartData = { labels: [ '01 (火)' ,'02 (水)','03 (木)','04 (金)','05 (土)','06 (日)','07 (月)','08 (火)','09 (水)','10 (木)','11 (金)','12 (土)','13 (日)','14 (月)','15 (火)','16 (水)',' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ,' ' ], datasets: [ { type: 'line', label: '当月累計', data: [ ' 1264' ,' 1575',' 1885',' 3479',' 3636',' 3665',' 4116',' 4624',' 4916',' 5388',' 5532',' 5837',' 5856',' 7339',' 7605',' 7938' ], borderColor : "rgba(0,0,0,0.8)", backgroundColor : "rgba(0,0,0,0.8)", pointBackgroundColor : "rgba(255,255,255,0.8)", hitRadius : 2, lineTension: 0, fill: false, yAxisID: "y-axis-2",// 追加 }, { type: 'line', label: '前月累計', data: [ ' 0' ,' 0',' 0',' 1192',' 1408',' 1798',' 2166',' 2470',' 2495',' 2614',' 8242',' 8537',' 8753',' 9478',' 9658',' 9665',' 12524',' 13273',' 13673',' 13909',' 16383',' 16491',' 17012',' 18627',' 19663',' 19825',' 22912',' 25074',' 26186',' 26212',' 27317' ], borderColor : "rgba(255,0,0,0.8)", backgroundColor : "rgba(255,0,0,0.8)", pointBackgroundColor : "rgba(255,0,0,0.8)", lineTension: 0, fill: false, yAxisID: "y-axis-2", }, { type: 'bar', label: '第一課 ', data: [ ' 15' ,' 16',' 20',' 74',' 2',' 0',' 3',' 198',' 3',' 235',' 10',' 12',' 0',' 883',' 68',' 58' ], borderColor : "rgba(0,0,0,1)", backgroundColor : "rgba(0,255,0,0.5)", borderWidth : 1, yAxisID: "y-axis-1", }, { type: 'bar', label: '第二課 ', data: [ ' 95' ,' 206',' 46',' 1438',' 0',' 0',' 363',' 223',' 125',' 112',' 82',' 1',' 0',' 484',' 92',' 104' ], borderColor : "rgba(0,0,0,1)", backgroundColor : "rgba(255,255,128,0.5)", borderWidth : 1, yAxisID: "y-axis-1", }, { type: 'bar', label: '第三課 ', data: [ ' 1154' ,' 88',' 244',' 82',' 154',' 29',' 84',' 87',' 164',' 125',' 51',' 292',' 19',' 116',' 106',' 171' ], borderColor : "rgba(0,0,0,1)", backgroundColor : "rgba(0,0,255,0.5)", borderWidth : 1, yAxisID: "y-axis-1", }, { type: 'bar', label: '合計売上', data: [ ' 1264' ,' 310',' 310',' 1594',' 157',' 29',' 451',' 508',' 292',' 472',' 144',' 305',' 19',' 1483',' 266',' 333' ], borderColor : "rgba(0,0,0,0.8)", backgroundColor : "rgba(255,255,255,0)", // 積み上げに重ねるため、白で透過 borderWidth: 1, // 枠線の太さ yAxisID: "y-axis-x", // 非表示の軸を指定 }, ], }; var complexChartOption = { animation: false, title: { display: true, fontSize: 28, text:'売上一覧            単位:万円' }, legend: { display: true, position: "right", labels: { fontSize: 14, boxWidth: 20, fontColor: 'rgb(255, 99, 132)' } }, responsive: true, scales: { yAxes: [ { id: "y-axis-1", type: "linear", position: "left", ticks: { Max: 2000, min: 0, callback: function(label, index, labels) { return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');}, fontSize: 14, }, gridLines: { color: 'rgb(0,0,0)', zeroLineColor: 'rgb(0,0,0)', }, stacked: true, }, { id: "y-axis-x", type: "linear", display: false, //隠します position: "left", ticks: { Max: 2000, min: 0, callback: function(label, index, labels) { return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');}, fontSize: 14, }, gridLines: { color: 'rgb(0,0,0)', zeroLineColor: 'rgb(0,0,0)', }, stacked: false, }, { id: "y-axis-2", type: "linear", position: "right", ticks: { callback: function(label, index, labels) { return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');}, Max: 40000, min: 0, fontSize: 14, }, gridLines: { zeroLineColor: 'rgb(128,0,255)', }, }, ], xAxes: [ { //x軸設定 display: true, //表示設定 scaleLabel: { //軸ラベル設定 display: true, //表示設定 }, ticks: { fontSize: 16, //フォントサイズ autoskip:false, // 狭くてもラベルを省略しない maxRotation: 60, // 60度に固定 minRotation: 60, }, stacked: true, }], }, tooltips: { mode:'label', titleFontSize : 18, bodyFontSize : 16, callbacks: { label: function(t, d) { var rLabel = d.datasets[t.datasetIndex].data[t.index].r; return d.datasets[t.datasetIndex].label + ': (' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g,',') + '万円)'; } } }, }; </script> コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。
大文字、小文字の記述が間違っていました。
suggestedMax から suggested 部分のみ削除していました。
誤 )Max 正)max

投稿2022/02/18 02:25

delsol

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問