🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

5467閲覧

chart.jsを用いた積み上げ棒グラフ(マイナス方向あり)+折れ線グラフについて

mimizuk

総合スコア8

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/12/19 04:55

編集2019/12/19 05:07

chart.jsで以下のようなグラフを作成しております
その中で積み上げ棒グラフのうち一つだけマイナス方向にのみ増えていくものを取り入れようとしていたのですがマイナス方向に数が増えれば増えるほど折れ線グラフの最初の数字がマイナスになってしまいます。
折れ線グラフの1月のy軸の数字を0にしたままマイナス方向への積み上げ棒グラフを作成する方法をご教示していただければと思います。
以下作成したものになります。

<!DOCTYPE html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> </head> <body> <canvas id="myChart" width="800" height="200"></canvas> <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, {
type: "bar", data:{ labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], datasets:[ { label:'折れ線1', type:'line', data:[3,3,3,3,3,3,3,3,3,3,3,3], backgroundColor: "red", borderColor : "rgba(254,97,132,0.8)", fill: false, borderDash: [5, 5], yAxisID: 'y-axis-1', }, { label:'折れ線2', type:'line', data:[0,3,4,4,3,3,3], backgroundColor: "black", borderColor : "rgba(0,0,0,255.8)", fill: false, yAxisID: 'y-axis-1', }, { label:'棒1', data:[0,3,4,4,4,4,4,4,4,4,], backgroundColor: "#00ff7f", yAxisID: 'y-axis-2', }, { label:'棒2', data:[6,3,2,3,0,0,0,0,3,2], backgroundColor: "gray", yAxisID: 'y-axis-2', }, { label:'棒3', data:[0,0,0,-1,-1,-2,-2,-2,-2,-2,], backgroundColor: "blue", yAxisID: 'y-axis-2', }, ] }, options:{ title: { //タイトル設定 display: true, //表示設定 fontSize: 18, //フォントサイズ text: '月別の数値', //ラベル// responsive: true, }, legend: { display: true, position: 'top', label:'test', }, scales:{ xAxes:[{stacked:true,}, ], yAxes:[{id: 'y-axis-1', stacked: false,//積み上げないY軸 type: 'linear', display: false, position: 'left', scaleLabel: { display: false, labelString: '【A】', fontSize: 12, //fontColor:'blue', }, ticks: {beginAtZero: true, max:8, stepSize: 1, } },{ id: 'y-axis-2',//積み上げるY軸 stacked: true, type: 'linear', display:true, position: 'left', ticks: { beginAtZero: true, max:8, stepSize: 1,},}, ] }, }, }); </script>
</body> </html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

折れ線グラフのy-axis-1position:rightにし、display:trueにすると原因がわかると思います。

ticksmin: -2をすると、おそらく期待するグラフになるでしょう。

投稿2019/12/19 05:23

Masakin

総合スコア192

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

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

mimizuk

2019/12/19 07:23

2種類のデータを用意したことで目盛りが2種類存在していたんですね ticksにmin: -2を追加したところ無事想定していたものが作成できました、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問