javascript chart.js 1ページ複数の円グラフ設置

javascript chart.jsを使用し、複数の円グラフを表示させたいのですが、1つしか表示されません。
記述方法などが、誤っているのでしょうか。ご指摘いただけると幸いです。

よろしくお願いします。

javascript
1<html lang="ja">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
4<meta name="keywords"content="html,css,javascript"/>
5<script type="text/javascript" src=""></script>
6  <title>test</title>
7</head>
8<style>
9body{ 
10  background-color:#f8f8ff;
11  color : #000000;
12  margin: 0 auto;
13  font-size:62.5%;
14}
15
16#header{
17  width:auto;
18  height:30px;
19  background-color:#E9D922;
20  font-size:2.0em;
21  text-align : center;
22}
23
24#contents{
25  width:1000px;
26  min-height:900px;
27  color : #000000;
28  margin: 0 auto;
29  margin-top:1.5%; 
30  margin-bottom: 1.5%;
31  background-color :#E9D922;
32  font-size: 1.6em;
33  line-height: 1.5em;
34  border-radius: 15px;
35}
36
37.parent {
38    text-align: center;         /* 子要素を左右中央揃えにする */
39    border: solid 0px;          /* 枠線指定 */
40    padding:  2px;             /* 余白指定 */
41}
42
43.inline-block {
44    display: inline-block;      /* インラインブロック要素にする */
45    background-color:  #ffffff;    /* 背景色指定 */
46    padding:  20px;             /* 余白指定 */
47    height: 300px;              /* 高さ指定 */
48    width: 280px;				/* 幅指定 */
49    vertical-align:  middle;    /* 要素を上下中央揃えにする */
50}
51
52.headershadow {
53   box-shadow: 0 3px 6px rgba(0,0,0,0.1);  /* 要素を上下中央揃えにする */
54}
55
56p {text-align: center}
57
58</style>
59<body>
60<p>
61<div class="parent">
62<div class="inline-block">
63   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
64<div style="position:absolute; top:40px; left:1px; width:400px; height:400px;">
65<canvas id="myChart"> </canvas>
66<script>
67var ctx = document.getElementById("myChart").getContext('2d');
68var myChart = new Chart(ctx, {
69  type: 'pie',
70  data: {
71   labels: ["M", "T", "W"],
72    datasets: [{
73      backgroundColor: [
74        "#fff33f",
75        "#f39800",
76        "#009e96"
77      ],
78      data: [22, 15, 3]
79    }]
80  }
81});
82Chart.plugins.register({
83    afterDatasetsDraw: function (chart, easing) {
84        // To only draw at the end of animation, check for easing === 1
85        var ctx = chart.ctx;
86
87        chart.data.datasets.forEach(function (dataset, i) {
88            var meta = chart.getDatasetMeta(i);
89            if (!meta.hidden) {
90                meta.data.forEach(function (element, index) {
91                    // Draw the text in black, with the specified font
92                    ctx.fillStyle = 'rgb(255, 255, 255)';
93
94                    var fontSize = 15;
95                    var fontStyle = 'normal';
96                    var fontFamily = 'Helvetica Neue';
97                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
98
99                    // Just naively convert to string for now
100                    var dataString = dataset.data[index].toString();
101
102                    // Make sure alignment settings are correct
103                    ctx.textAlign = 'center';
104                    ctx.textBaseline = 'middle';
105
106                    var padding = 5;
107                    var position = element.tooltipPosition();
108                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
109                });
110            }
111        });
112    }
113});
114</script>
115</div>
116</div>
117<div class="inline-block">
118   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
119<div style="position:absolute; top:40px; left:1px; width:400px; height:400px;">
120<canvas id="myChart1"> </canvas>
121<script>
122var ctx = document.getElementById("myChart1").getContext('2d');
123var myChart1 = new Chart(ctx, {
124  type: 'pie',
125  data: {
126   labels: ["M", "T", "W"],
127    datasets: [{
128      backgroundColor: [
129        "#fff33f",
130        "#f39800",
131        "#009e96"
132      ],
133      data: [22, 15, 3]
134    }]
135  }
136});
137Chart.plugins.register({
138    afterDatasetsDraw: function (chart, easing) {
139        // To only draw at the end of animation, check for easing === 1
140        var ctx = chart.ctx;
141
142        chart.data.datasets.forEach(function (dataset, i) {
143            var meta = chart.getDatasetMeta(i);
144            if (!meta.hidden) {
145                meta.data.forEach(function (element, index) {
146                    // Draw the text in black, with the specified font
147                    ctx.fillStyle = 'rgb(255, 255, 255)';
148
149                    var fontSize = 15;
150                    var fontStyle = 'normal';
151                    var fontFamily = 'Helvetica Neue';
152                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
153
154                    // Just naively convert to string for now
155                    var dataString = dataset.data[index].toString();
156
157                    // Make sure alignment settings are correct
158                    ctx.textAlign = 'center';
159                    ctx.textBaseline = 'middle';
160
161                    var padding = 5;
162                    var position = element.tooltipPosition();
163                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
164                });
165            }
166        });
167    }
168});
169</script>
170</div>
171</div>
172<div class="inline-block">
173    横並びにできます
174</div>
175</div>
176
177<div class="parent">
178<div class="inline-block">
179    横並びにできます
180</div>
181<div class="inline-block">
182    横並びにできます
183</div>
184<div class="inline-block">
185    横並びにできます
186</div>
187</div>
188
189</body>
190</html>
191

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

回答2件

ベストアンサー

Chart.min.jsは何度も読み込む必要がありません。何度も読み込むことによって機能がバッティングしてしまって別問題が発生する可能性もあります。
JavaScriptの記述がHTML内に紛れ込んでしまうと非常に読みづらいです。Chart.min.jsの読み込みともども最後にまとめましょう。
出す数字や設定などが同じだとどちらが出ているか分かりません。少し変更しましょう。
myChartとmyChart1を同じ変数で受けていますができれば別の変数にしましょう（問題切り分けのため）
コードのインデントはつけましょう（HTMLも）

とりあえず上記だけ対応した結果のコード

html
1
2<body>
3    <div class="parent">
4      <div class="inline-block">
5        <div style="position:absolute; top:40px; left:1px; width:400px; height:400px;">
6          <canvas id="myChart"> </canvas>
7        </div>
8      </div>
9      <div class="inline-block">
10        <div style="position:absolute; top:40px; left:1px; width:400px; height:400px;">
11          <canvas id="myChart1"> </canvas>
12        </div>
13      </div>
14      <div class="inline-block">
15        横並びにできます
16      </div>
17    </div>
18
19    <div class="parent">
20      <div class="inline-block">
21        横並びにできます
22      </div>
23      <div class="inline-block">
24        横並びにできます
25      </div>
26      <div class="inline-block">
27        横並びにできます
28      </div>
29    </div>
30    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
31<script>
32var ctx = document.getElementById("myChart").getContext('2d');
33var myChart = new Chart(ctx, {
34  type: 'pie',
35  data: {
36   labels: ["M", "T", "W"],
37    datasets: [{
38      backgroundColor: [
39        "#fff33f",
40        "#f39800",
41        "#009e96"
42      ],
43      data: [22, 15, 3]
44    }]
45  }
46});
47Chart.plugins.register({
48    afterDatasetsDraw: function (chart, easing) {
49        // To only draw at the end of animation, check for easing === 1
50        var ctx = chart.ctx;
51
52        chart.data.datasets.forEach(function (dataset, i) {
53            var meta = chart.getDatasetMeta(i);
54            if (!meta.hidden) {
55                meta.data.forEach(function (element, index) {
56                    // Draw the text in black, with the specified font
57                    ctx.fillStyle = 'rgb(255, 255, 255)';
58
59                    var fontSize = 15;
60                    var fontStyle = 'normal';
61                    var fontFamily = 'Helvetica Neue';
62                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
63
64                    // Just naively convert to string for now
65                    var dataString = dataset.data[index].toString();
66
67                    // Make sure alignment settings are correct
68                    ctx.textAlign = 'center';
69                    ctx.textBaseline = 'middle';
70
71                    var padding = 5;
72                    var position = element.tooltipPosition();
73                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
74                });
75            }
76        });
77    }
78});
79
80var ctx1 = document.getElementById("myChart1").getContext('2d');
81var myChart1 = new Chart(ctx1, {
82  type: 'pie',
83  data: {
84   labels: ["M", "T", "W"],
85    datasets: [{
86      backgroundColor: [
87        "#fff33f",
88        "#f39800",
89        "#009e96"
90      ],
91      data: [99, 22, 33]
92    }]
93  }
94});
95Chart.plugins.register({
96    afterDatasetsDraw: function (chart, easing) {
97        // To only draw at the end of animation, check for easing === 1
98        var ctx = chart.ctx;
99
100        chart.data.datasets.forEach(function (dataset, i) {
101            var meta = chart.getDatasetMeta(i);
102            if (!meta.hidden) {
103                meta.data.forEach(function (element, index) {
104                    // Draw the text in black, with the specified font
105                    ctx.fillStyle = 'rgb(255, 255, 255)';
106
107                    var fontSize = 15;
108                    var fontStyle = 'normal';
109                    var fontFamily = 'Helvetica Neue';
110                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
111
112                    // Just naively convert to string for now
113                    var dataString = dataset.data[index].toString();
114
115                    // Make sure alignment settings are correct
116                    ctx.textAlign = 'center';
117                    ctx.textBaseline = 'middle';
118
119                    var padding = 5;
120                    var position = element.tooltipPosition();
121                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
122                });
123            }
124        });
125    }
126});
127</script>
128</body>

すると2つ目だけが出ていることが分かります。

2つ目のJavaScriptの記述を削除すれば1つ目も表示されていることが分かります。

ちなみにHTML部分をミニマムにします。

html
1          <canvas id="myChart"> </canvas>
2          <canvas id="myChart1"> </canvas>

ちゃんと2つとも出ていますね。

となるとCSSの問題か、HTMLの問題か・・・になってきます。

投稿2019/08/19 07:16

m.ts10806

総合スコア80888

laph

2019/08/20 02:16

丁寧に解説していただき、ありがとうございます。CSSの問題で重なっていたことに気づきませんでした。思い通りに表示でき、とても助かりました。

m.ts10806

2019/08/20 02:18

解決されたようで何よりです。今回私が回答で投稿したような確認の方法は他でも使えると思います。基本は「最小構成から試す」です。そこから１つずつ問題を切り分けていきます。今回は別の要素に対してグラフを指定しているところから「おそらくグラフは表示されているだろう」という仮説のもと、検証を行いました。

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

全てのグラフが同じ場所に重なって表示されてます。
.inline-block に
position:relative;
を追加してみてください。

投稿2019/08/19 07:00

yxt003

総合スコア184

laph

2019/08/20 02:14

回答ありがとうございます。グラフが重なっていたことに気づきませんでした。position:relative;を追加し、うまく表示することができました。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.31%

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

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

質問する

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

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

javascript chart.js 1ページ複数の円グラフ設置

関連した質問