chart.jsを用いた積み上げ棒グラフ+折れ線グラフの作成について

前提・実現したいこと

Chart.jsを利用して積み上げ棒グラフ+折れ線グラフを作成しているところです。
最終的に積み上げ棒グラフ+複数の折れ線グラフといったグラフを作成しようとしているところです。

発生している問題・エラーメッセージ

積み上げ棒グラフはうまくいったのですが折れ線グラフの方数値が正しく認識されず行き詰ってしまいました。
恐らく積み上げ棒グラフのstacked:trueが折れ線グラフにも反映されているためだと思うのですが改善方法が分かりません。
方法をご教示いただけますと幸いです。

該当のソースコード

chart.js
1<!DOCTYPE html>
2<html lang=“ja”>
3
4<head>
5    <meta http-equiv="content-language" content="ja">
6    <meta name="robots" content="noindex,nofollow">
7    <meta charset="shift_jis">
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
9
10    <title>HTML Sample</title>
11</head>
12
13<body>
14    <canvas id="myChart" width="600" height="150"></canvas>
15
16    <script>
17        var ctx = document.getElementById("myChart");
18        var myChart = new Chart(ctx, {
19
20      type: "bar",
21
22      data:{
23        labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
24        datasets:[
25        {
26          label:'line1',
27          type:'line',
28          data:[6,3,2,2,4,4,3],
29          backgroundColor: "red",
30            borderColor : "rgba(254,97,132,0.8)",
31          fill: false,
32        },
33        {
34          label:'line2',
35          type:'line',
36          data:[2,3,4,5,6,7,8],
37          backgroundColor: "blue",
38            borderColor : "rgba(254,97,132,0.8)",
39          fill: false,
40        },
41        {
42          label:'line3',
43          type:'line',
44          data:[5,5,5,5,5,5,5,5,5,5,5,5],
45          backgroundColor: "red",
46            borderColor : "red",
47          fill: false,
48        },
49        {
50          label:'数値A',
51            data:[0,0,1,1,1,1,1,3,2,1,],
52            backgroundColor: "#00ff7f"
53          },
54          {
55          label:'数値B',
56          data:[3,3,3,3,3,3,3],
57          backgroundColor: "#008000"
58        },
59      ]
60      },
61      options:{
62        title: {                           //タイトル設定
63             display: true,                 //表示設定
64             fontSize: 18,                  //フォントサイズ
65             text: '月別の数値'                //ラベル//
66},
67        legend: {
68     display: true,
69     position: 'top',
70     label:'test', },
71
72        scales:{
73          xAxes:[{stacked:true,}],
74          yAxes:[{id: 'y-axis-sales',
75            stacked: true,
76            type: 'linear',
77                  display: true,
78                  position: 'left',
79                  ticks: {beginAtZero: true}}] },
80
81      }
82    });
83    </script>
84</body>
85</html>
86
87
88### 試したこと
89恐らく    yAxes・xAxesに折れ線グラフ用のstacked:falseを設定することで解決できるかと思ったのですがうまくいきませんでした

行動規範の内容に同意します

回答1件

ベストアンサー

yAxes・xAxesに折れ線グラフ用のstacked:falseを設定することで解決

こちらの方法で解決できましたよ。

javascript
1var myChart = new Chart(ctx, {
2	type: "bar",
3	data:{
4		labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
5		datasets:[
6			{
7				label:'line1',
8				type:'line',
9				data:[6,3,2,2,4,4,3],
10				backgroundColor: "red",
11				borderColor : "rgba(254,97,132,0.8)",
12				fill: false,
13				yAxisID: 'y-axis-2',
14			},
15			{
16				label:'line2',
17				type:'line',
18				data:[2,3,4,5,6,7,8],
19				backgroundColor: "blue",
20				borderColor : "rgba(254,97,132,0.8)",
21				fill: false,
22				yAxisID: 'y-axis-2',
23			},
24			{
25				label:'line3',
26				type:'line',
27				data:[5,5,5,5,5,5,5,5,5,5,5,5],
28				backgroundColor: "red",
29				borderColor : "red",
30				fill: false,
31				yAxisID: 'y-axis-2',
32			},
33			{
34				label:'数値A',
35				data:[0,0,1,1,1,1,1,3,2,1,],
36				backgroundColor: "#00ff7f",
37				yAxisID: 'y-axis-sales',
38			},
39			{
40				label:'数値B',
41				data:[3,3,3,3,3,3,3],
42				backgroundColor: "#008000",
43				yAxisID: 'y-axis-sales'
44			},
45		]
46	},
47	options:{
48		title: {                           //タイトル設定
49			display: true,                 //表示設定
50			fontSize: 18,                  //フォントサイズ
51			text: '月別の数値'                //ラベル//
52		},
53		legend: {
54			display: true,
55			position: 'top',
56			label:'test', 
57		},
58		scales:{
59			xAxes:[{stacked:true,}],
60			yAxes:[{
61				id: 'y-axis-sales',//積み上げるY軸
62				stacked: true,
63				type: 'linear',
64				display: true,
65				position: 'left',
66				ticks: {
67					beginAtZero: true,
68					min: 0,
69					max: 10,
70					stepSize: 1,
71				},
72			},{
73				id: 'y-axis-2',//積み上げないY軸
74				stacked: false,
75				type: 'linear',
76				display: false,//隠します
77				position: 'left',
78				ticks: {
79					beginAtZero: true,
80					min: 0,
81					max: 10,
82					stepSize: 1,
83				},
84			}]
85		},
86	}
87});

グラフ作成のポイントは

１. 積み上げるY軸と、積み上げないY軸を用意する。
２. 棒グラフは積み上げるY軸を、折れ線グラフは積み上げないY軸を利用する。
３. 積み上げるY軸と、積み上げないY軸は「min,max,stepSize」を指定して、まったく同じ軸ラベルが作成されるようにする。
４. 片方の軸ラベルはdisplay:falseで隠す。（さも1つの軸だけを使っているように見せる為なので、隠さなくてもいいです。）

です。

もし、グラフデータの内容が動的に変化するのであれば、
３のmaxとかをデータから判断することになるので、ちょっと大変かもですね。

あと、とりあえずうまくいったので、上記コードでは「積み上げないX軸」を省略してしまったのですが、本来は用意すべきかもです。

他にも方法はあるのかな・・？？

以上、ご参考までに。。。

投稿2019/12/18 08:29