質問編集履歴

1

コードを追記しました

2023/01/02 06:25

投稿

yagri
yagri

スコア1

test CHANGED
File without changes
test CHANGED
@@ -17,3 +17,112 @@
17
17
  しかし、そのやり方がいまいちわからず質問させて頂きました。
18
18
  どなたかお詳しい方、ご教授頂けないでしょうか。
19
19
  よろしくお願い致します。
20
+
21
+
22
+
23
+
24
+ ■追記
25
+ ```html
26
+ \u003C!DOCTYPE html>
27
+ \u003Chtml lang=\"ja\">
28
+ \u003Chead>
29
+ \u003Cmeta charset=\"utf-8\">
30
+ \u003Ctitle>9-5-3 棒グラフ(横・複数バー)\u003C/title>
31
+ \u003Cmeta name=\"description\" content=\"書籍「動くWebデザインアイディア帳」のサンプルサイトです\">
32
+
33
+ \u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">
34
+ \u003C!--==============レイアウトを制御する独自のCSSを読み込み===============-->
35
+ \u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css\">
36
+ \u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/9-5-3/css/9-5-3.css\">
37
+ \u003C/head>
38
+
39
+ \u003Cbody>
40
+
41
+ \u003Ch1>棒グラフ(横・複数バー)\u003C/h1>
42
+ \u003Cp class=\"lead\">使用したライブラリ:\u003Ca href=\"https://www.chartjs.org/\" target=\"_blank\">https://www.chartjs.org/\u003C/a>\u003C/p>
43
+
44
+ \u003Cdiv class=\"box\">
45
+ \u003Ch2>病床稼働率\u003C/h2>
46
+ \u003Cdiv>
47
+ \u003Ccanvas id=\"chart02\">\u003C/canvas>
48
+ \u003C/div>
49
+ \u003C!--/box-->\u003C/div>
50
+
51
+ \u003Cscript src=\"https://code.jquery.com/jquery-3.4.1.min.js\" integrity=\"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=\" crossorigin=\"anonymous\">\u003C/script>
52
+ \u003Cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js\">\u003C/script>
53
+ \u003Cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js\">\u003C/script>
54
+ \u003C!--CodePenプレビュー用にコメントアウトしています。※CodePenで読み込んだJSとHTMLで読み込んだJSがバッティングして挙動がおかしくなっているため。ご利用の際はコメントを取り除いてご利用ください。\u003Cscript src=\"https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/9-5-3/js/9-5-3.js\">\u003C/script>-->
55
+ \u003C/body>
56
+ \u003C/html>
57
+ コード
58
+ ```
59
+
60
+
61
+ ```CSS
62
+ @charset \"utf-8\";
63
+
64
+ /*========= レイアウトのためのCSS ===============*/
65
+
66
+ body{
67
+ background:#ECF2FC;
68
+ }
69
+
70
+ h1{
71
+ text-align: center;
72
+ text-transform: uppercase;
73
+ font-size: 2rem;
74
+ margin:30px 0;
75
+ }
76
+
77
+ .lead{
78
+ padding: 20px;
79
+ text-align: center;
80
+ }
81
+
82
+ .box{
83
+ max-width:600px;
84
+ width:100%;
85
+ margin:100px auto 330px auto;
86
+ padding: 20px;
87
+ background:#fff;
88
+ text-align: center;
89
+ }
90
+
91
+ コード
92
+ ```
93
+
94
+
95
+
96
+ ```javascript
97
+ //値をグラフに表示させる
98
+ Chart.plugins.register({
99
+ afterDatasetsDraw: function (chart, easing) {
100
+ var ctx = chart.ctx;
101
+ chart.data.datasets.forEach(function (dataset, i) {
102
+ var meta = chart.getDatasetMeta(i);
103
+ if (!meta.hidden) {
104
+ meta.data.forEach(function (element, index) {
105
+ // 値の表示
106
+ ctx.fillStyle = 'rgb(0, 0, 0,0.8)';//文字の色
107
+ var fontSize = 12;//フォントサイズ
108
+ var fontStyle = 'normal';//フォントスタイル
109
+ var fontFamily = 'Arial';//フォントファミリー
110
+ ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
111
+
112
+ var dataString = dataset.data[index].toString();
113
+
114
+ // 値の位置
115
+ ctx.textAlign = 'center';//テキストを中央寄せ
116
+ ctx.textBaseline = 'middle';//テキストベースラインの位置を中央揃え
117
+
118
+ var padding = 5;//余白
119
+ var position = element.tooltipPosition();
120
+ ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
121
+
122
+ });
123
+ }
124
+ });
125
+ }
126
+ });
127
+ コード
128
+ ```