[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

■ 実行結果

＜参考＞
■ Snap.svg - Home
http://snapsvg.io/
■ Javascriptで表とグラフを組み合わせた図を作りたい
https://teratail.com/questions/364216

投稿2021/12/01 15:18

cx20

総合スコア4633

退会済みユーザー

2021/12/04 02:49

svgを使う手がありましたね。こちらで試してみたいと思います。ソースコードのサンプルも記述いただき大変助かります。ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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