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

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

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

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

Q&A

解決済

1回答

923閲覧

Chart.jsで2軸の0点を同じにしたい

delsol

総合スコア20

Chart.js

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

0グッド

0クリップ

投稿2021/12/21 00:33

日々の売上(棒グラフ)と累計売上(折れ線グラフ)をひとつのグラフで表示しています。
日々の売上が返品過多でマイナスになった場合、0点が異なってしまいます。
これを左右合わせるには、どのようにしたら良いでしょうか?
Chart.js Version:2.7.2を使用中です。

左の軸に棒グラフ用、右の軸に折れ線グラフ用を定義しています。

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: {
fontSize: 14,
},
gridLines: {
color: 'rgb(0,0,0)',
zeroLineColor: 'rgb(0,0,0)',
},
},
{
id: "y-axis-2",
type: "linear",
position: "right",
ticks: {
fontSize: 14,
},
gridLines: {
zeroLineColor: 'rgb(128,0,255)',
},
},
],
xAxes: [ {
display: true,
scaleLabel: {
display: true,
fontSize: 14
},
ticks: {
fontSize: 16,
autoskip:false,
maxRotation: 60,
minRotation: 60,
},
}],
},

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。
左右軸のmin,maxを計算して同じ比率になるように固定することで0点を同じにしました。

投稿2022/02/18 02:29

delsol

総合スコア20

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問