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

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

ただいまの
回答率

89.86%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 246

laph

score 11

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

よろしくお願いします。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords"content="html,css,javascript"/>
<script type="text/javascript" src=""></script>
  <title>test</title>
</head>
<style>
body{ 
  background-color:#f8f8ff;
  color : #000000;
  margin: 0 auto;
  font-size:62.5%;
}

#header{
  width:auto;
  height:30px;
  background-color:#E9D922;
  font-size:2.0em;
  text-align : center;
}

#contents{
  width:1000px;
  min-height:900px;
  color : #000000;
  margin: 0 auto;
  margin-top:1.5%; 
  margin-bottom: 1.5%;
  background-color :#E9D922;
  font-size: 1.6em;
  line-height: 1.5em;
  border-radius: 15px;
}

.parent {
    text-align: center;         /* 子要素を左右中央揃えにする */
    border: solid 0px;          /* 枠線指定 */
    padding:  2px;             /* 余白指定 */
}

.inline-block {
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #ffffff;    /* 背景色指定 */
    padding:  20px;             /* 余白指定 */
    height: 300px;              /* 高さ指定 */
    width: 280px;                /* 幅指定 */
    vertical-align:  middle;    /* 要素を上下中央揃えにする */
}

.headershadow {
   box-shadow: 0 3px 6px rgba(0,0,0,0.1);  /* 要素を上下中央揃えにする */
}

p {text-align: center}

</style>
<body>
<p>
<div class="parent">
<div class="inline-block">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<div style="position:absolute; top:40px; left:1px; width:400px; height:400px;">
<canvas id="myChart"> </canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
   labels: ["M", "T", "W"],
    datasets: [{
      backgroundColor: [
        "#fff33f",
        "#f39800",
        "#009e96"
      ],
      data: [22, 15, 3]
    }]
  }
});
Chart.plugins.register({
    afterDatasetsDraw: function (chart, easing) {
        // To only draw at the end of animation, check for easing === 1
        var ctx = chart.ctx;

        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    // Draw the text in black, with the specified font
                    ctx.fillStyle = 'rgb(255, 255, 255)';

                    var fontSize = 15;
                    var fontStyle = 'normal';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                    // Just naively convert to string for now
                    var dataString = dataset.data[index].toString();

                    // Make sure alignment settings are correct
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }
        });
    }
});
</script>
</div>
</div>
<div class="inline-block">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<div style="position:absolute; top:40px; left:1px; width:400px; height:400px;">
<canvas id="myChart1"> </canvas>
<script>
var ctx = document.getElementById("myChart1").getContext('2d');
var myChart1 = new Chart(ctx, {
  type: 'pie',
  data: {
   labels: ["M", "T", "W"],
    datasets: [{
      backgroundColor: [
        "#fff33f",
        "#f39800",
        "#009e96"
      ],
      data: [22, 15, 3]
    }]
  }
});
Chart.plugins.register({
    afterDatasetsDraw: function (chart, easing) {
        // To only draw at the end of animation, check for easing === 1
        var ctx = chart.ctx;

        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    // Draw the text in black, with the specified font
                    ctx.fillStyle = 'rgb(255, 255, 255)';

                    var fontSize = 15;
                    var fontStyle = 'normal';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                    // Just naively convert to string for now
                    var dataString = dataset.data[index].toString();

                    // Make sure alignment settings are correct
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }
        });
    }
});
</script>
</div>
</div>
<div class="inline-block">
    横並びにできます
</div>
</div>

<div class="parent">
<div class="inline-block">
    横並びにできます
</div>
<div class="inline-block">
    横並びにできます
</div>
<div class="inline-block">
    横並びにできます
</div>
</div>

</body>
</html>


イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+6

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

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

<body>
    <div class="parent">
      <div class="inline-block">
        <div style="position:absolute; top:40px; left:1px; width:400px; height:400px;">
          <canvas id="myChart"> </canvas>
        </div>
      </div>
      <div class="inline-block">
        <div style="position:absolute; top:40px; left:1px; width:400px; height:400px;">
          <canvas id="myChart1"> </canvas>
        </div>
      </div>
      <div class="inline-block">
        横並びにできます
      </div>
    </div>

    <div class="parent">
      <div class="inline-block">
        横並びにできます
      </div>
      <div class="inline-block">
        横並びにできます
      </div>
      <div class="inline-block">
        横並びにできます
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
   labels: ["M", "T", "W"],
    datasets: [{
      backgroundColor: [
        "#fff33f",
        "#f39800",
        "#009e96"
      ],
      data: [22, 15, 3]
    }]
  }
});
Chart.plugins.register({
    afterDatasetsDraw: function (chart, easing) {
        // To only draw at the end of animation, check for easing === 1
        var ctx = chart.ctx;

        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    // Draw the text in black, with the specified font
                    ctx.fillStyle = 'rgb(255, 255, 255)';

                    var fontSize = 15;
                    var fontStyle = 'normal';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                    // Just naively convert to string for now
                    var dataString = dataset.data[index].toString();

                    // Make sure alignment settings are correct
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }
        });
    }
});

var ctx1 = document.getElementById("myChart1").getContext('2d');
var myChart1 = new Chart(ctx1, {
  type: 'pie',
  data: {
   labels: ["M", "T", "W"],
    datasets: [{
      backgroundColor: [
        "#fff33f",
        "#f39800",
        "#009e96"
      ],
      data: [99, 22, 33]
    }]
  }
});
Chart.plugins.register({
    afterDatasetsDraw: function (chart, easing) {
        // To only draw at the end of animation, check for easing === 1
        var ctx = chart.ctx;

        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    // Draw the text in black, with the specified font
                    ctx.fillStyle = 'rgb(255, 255, 255)';

                    var fontSize = 15;
                    var fontStyle = 'normal';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                    // Just naively convert to string for now
                    var dataString = dataset.data[index].toString();

                    // Make sure alignment settings are correct
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }
        });
    }
});
</script>
</body>

イメージ説明

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

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

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

          <canvas id="myChart"> </canvas>
          <canvas id="myChart1"> </canvas>


イメージ説明

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

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

<style>内で定義しているCSSを削っても変化はありません。

なぜか?

下記が効いています。

<div style="position:absolute; top:40px; left:1px; width:400px; height:400px;">

そうですね。両方のグラフ表示エリアの親のdivにインラインで指定されているスタイルです。

どのようにしたいのか分からないのでここで具体的にどうすれば良いのか指定することはできませんが、とりあえずこのインラインスタイルを解除すればちゃんと2つとも表示されます。

あくまで重なり順の問題かなと。要は、同じ場所に同じサイズのグラフが重なっていて後の方だけが表示されているように見えた、というところですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/20 11:16

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

    キャンセル

  • 2019/08/20 11:18

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

    キャンセル

+3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/20 11:14

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

    キャンセル

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

  • ただいまの回答率 89.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる