[Chart.js]可変するグラフの上にテキストを乗せる

前提・実現したいこと

chart.jsを使用して実装したグラフの上の決まった位置にテキストを置きたい。

実装イメージ

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

cssで位置調整をして実装したのですが、
画面サイズによってテキストの位置がズレてしまうので、可変しても決まった位置にテキストが表示されるようにしたいです。
PC時/SP時で指定しましたが、SP時の場合chart.jsの仕様により少し画面幅が違うだけでグラフ自体のサイズも変わるので
大幅にテキストの位置がズレてしまいます。

該当のソースコード

html
1<div class="chart-area">
2    <canvas id="chart05"></canvas>
3    <div class="per-txt chart05">
4        <p class="txt01">1<span class="span2">6<span class="unit">人</span></span></p>
5        <p class="txt02">2<span class="span2">6<span class="unit">人</span></span></p>
6        <p class="txt03">3<span class="span2">3<span class="unit">人</span></span></p>
7        <p class="txt04">4<span class="span2">2<span class="unit">人</span></span></p>
8        <p class="txt05">5<span class="span2">1<span class="unit">人</span></span></p>
9        <p class="txt06">6<span class="span2">5<span class="unit">人</span></span></p>
10        <p class="txt07"><span class="span02">その他</span><span class="span2">2<span class="unit">人</span></span></p>
11    </div>
12</div>

下記CSSはPCの場合です。

css
1.chart-area {
2  position: relative;
3  width: 100%;
4  height: 490px;
5}
6
7.per-txt p {
8  position: absolute;
9  line-height: 1.2;
10}
11
12.chart-area .chart05 .txt01 {
13  top: 8%;
14  font-size: 1.4rem;
15  color: #fff;
16}
17
18.chart-area .chart05 .unit {
19  font-size: 1rem;
20}
21
22.chart-area .chart05 .txt01 .span2 {
23  position: relative;
24  left: 27rem;
25}
26
27.chart-area .chart05 .txt02 {
28  top: 15.5%;
29}
30
31.chart-area .chart05 .txt02 .span2 {
32  position: relative;
33  left: 27rem;
34  color: #796f5a;
35}
36
37.chart-area .chart05 .txt03 {
38  top: 22%;
39  color: #fff;
40}
41
42.chart-area .chart05 .txt03 .span2 {
43  position: relative;
44  left: 8.5rem;
45}
46
47.chart-area .chart05 .txt04 {
48  top: 29%;
49}
50
51.chart-area .chart05 .txt04 .span2 {
52  position: relative;
53  left: 5rem;
54  color: #796f5a;
55}
56
57.chart-area .chart05 .txt05 {
58  top: 36%;
59  color: #fff;
60}
61
62.chart-area .chart05 .txt05 .span2 {
63  position: relative;
64  left: 3.5rem;
65  color: #796f5a;
66}
67
68.chart-area .chart05 .txt06 {
69  top: 43%;
70}
71
72.chart-area .chart05 .txt06 .span2 {
73  position: relative;
74  left: 14rem;
75  color: #796f5a;
76}
77
78.chart-area .chart05 .txt07 {
79  top: 50%;
80  color: #796f5a;
81  left: 5rem;
82}
83
84.chart-area .chart05 .txt07 .span2 {
85  position: relative;
86  left: 7%;
87  color: #796f5a;
88}

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

回答1件

ベストアンサー

単純な棒グラフであれば SVG でグラフを描いてみるのは如何でしょうか？
少なくともテキストの位置ズレは無くなるかと思います。

以下は Snap.svg という SVG ライブラリの使用例になります。

■ サンプルコード
https://jsfiddle.net/cx20/ftebgv7p/

html
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
5</head>
6<body>
7
8<div id="container" style="width:100%">
9<svg id="svg" width="100%" viewBox="0 0 500 210"></svg>
10</div>
11
12<script>
13let svg = Snap("#svg");
14let BAR_WIDTH = 80;
15let BAR_HEIGHT = 30;
16svg.rect(0, BAR_HEIGHT * 0, BAR_WIDTH * 6, BAR_HEIGHT-5).attr({fill: "#776"});
17svg.rect(0, BAR_HEIGHT * 1, BAR_WIDTH * 6, BAR_HEIGHT-5).attr({fill: "#ddc"});
18svg.rect(0, BAR_HEIGHT * 2, BAR_WIDTH * 3, BAR_HEIGHT-5).attr({fill: "#776"});
19svg.rect(0, BAR_HEIGHT * 3, BAR_WIDTH * 2, BAR_HEIGHT-5).attr({fill: "#ddc"});
20svg.rect(0, BAR_HEIGHT * 4, BAR_WIDTH * 1, BAR_HEIGHT-5).attr({fill: "#776"});
21svg.rect(0, BAR_HEIGHT * 5, BAR_WIDTH * 5, BAR_HEIGHT-5).attr({fill: "#ddc"});
22svg.rect(0, BAR_HEIGHT * 6, BAR_WIDTH * 2, BAR_HEIGHT-5).attr({fill: "#776"});
23
24svg.text(10, BAR_HEIGHT * 0 + 20, "1").attr({fill: "#fff"});
25svg.text(10, BAR_HEIGHT * 1 + 20, "2").attr({fill: "#fff"});
26svg.text(10, BAR_HEIGHT * 2 + 20, "3").attr({fill: "#fff"});
27svg.text(10, BAR_HEIGHT * 3 + 20, "4").attr({fill: "#fff"});
28svg.text(10, BAR_HEIGHT * 4 + 20, "5").attr({fill: "#fff"});
29svg.text(10, BAR_HEIGHT * 5 + 20, "6").attr({fill: "#fff"});
30
31svg.text(BAR_WIDTH * 5.0, BAR_HEIGHT * 0 + 20, "6人").attr({fill: "#fff"});
32svg.text(BAR_WIDTH * 5.0, BAR_HEIGHT * 1 + 20, "6人").attr({fill: "#776"});
33svg.text(BAR_WIDTH * 2.0, BAR_HEIGHT * 2 + 20, "3人").attr({fill: "#fff"});
34svg.text(BAR_WIDTH * 1.5, BAR_HEIGHT * 3 + 20, "2人").attr({fill: "#776"});
35svg.text(BAR_WIDTH * 1.1, BAR_HEIGHT * 4 + 20, "1人").attr({fill: "#776"});
36svg.text(BAR_WIDTH * 4.0, BAR_HEIGHT * 5 + 20, "5人").attr({fill: "#776"});
37svg.text(BAR_WIDTH * 2.1, BAR_HEIGHT * 6 + 20, "その他2人").attr({fill: "#776"});
38</script>
39</body>
40</html>
41