jsonより非同期処理で取得したデータを横向きの棒グラフで表示したい

Question

前提

jsonのデータを非同期処理で取得することはできた。その内の格納されているある値のみを使用して百分率をfor文で求められた(json内のcompletion_rateから求めた)。

実現したいこと

・json内に格納されている値を取得して、tbodyタグ内にその値を棒グラフ化したものを完成させたい。棒グラフは最大を100として、百分率で求めた値をwidth指定して棒グラフ化したい。
下記サイトのようなことを実現したいです。

https://1-notes.com/javascript-horizontal-bar-graph/

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

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'style')というエラー文が、
document.getElementById('#' + variable.completion_rate).style.width =
        'variable.percentage + ' % '';
の部分に生じる。よって棒グラフ本体はwidthを指定されず、値分の大きさにならない。

該当のソースコード

--html--
<div class="class__table">
        <table id="class__table" class="class__table-left">
          <thead>
            <tr">
              <th>ID</th>
              <th class="class__table-left-th">MR名</th>
              <th>割当て</th>
              <th>完了</th>
              <th>未完了</th>
              <th>完了率</th>
            </tr>
          </thead>
          <tbody id="tbody"></tbody>
        </table>

        <table class="class__table-right">
          <thead>
            <tr id="thead__tr" class="thead__bg-grey"></tr>
          </thead>
          <tbody id="class__graf-container">
          </tbody>
        </table>
      </div>
--html--

--scss--
body {
  background-color: #f2f2f2;
}

th {
  font-weight: normal;

  span {
    color: #acacac;
  }

  &:first-child {
    text-align: left;
  }
}

tr {
  border-bottom: 1px solid #f2f2f2;
}

td {
  text-align: center;
  &:nth-child(2) {
    font-weight: bold;
    text-align: left;
  }
}

th,
td {
  padding: 12px 20px;
}

tbody {
  tr {
    &:last-child {
      border-bottom: none;
    }
  }
}

.class {
  width: 90%;
  margin: 0 auto;

  &__take {
    display: flex;

    img {
      margin-right: 20px;
      width: 40px;
    }
  }

  canvas {
    display: contents;
  }

  &__table {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 8px #ededed;
    display: flex;
    overflow: hidden;

    &-left {
      border-collapse: collapse;
      font-size: 16px;

      &-th {
        width: 200px;
        text-align: left;
      }
    }

    &-right {
      border-collapse: collapse;
      width: 46%;

      th {
        color: #f6f6f6;
      }
    }
  }
}

.thead__bg-grey {
  background-color: #595959;
}
.graf {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.graf-bar-bg {
  width: 100%;
  background: #f6f6f6;
  height: auto;
}

.graf-bar {
  background: #32cd32;
}

.graf-bar span {
  color: #fff;
  padding: 0 6px;
}
--scss--

--js--
  const progressData = '../json/progresslist.json';

window.addEventListener('DOMContentLoaded', async () => {
    const users = await fetch(progressData)
      .then((res) => res.json())
      .then((x) => x.users);
    users.forEach((y) => {
      const tr = `<tr>
        <td>${y.user_id}</td>
        <td>${y.user_name}</td>
        <td>${y.allocation_size}</td>
        <td>${y.completion_size}</td>
        <td>${y.non_completion_size}</td>
        <td>${y.completion_rate}</td>
        </tr>`;
      tbody.insertAdjacentHTML('beforeend', tr);
    });
  });

  //上の表の右側の条グラフタイトルを取得して描画
  window.addEventListener('DOMContentLoaded', async () => {
    const average = await fetch(progressData)
      .then((res) => res.json())
      .then((a) => a.average);
    const th = `<th><span>全国平均　</span>${average.all + '%'}</th>
    <th><span>支店平均　</span>${average.branch_office + '%'}</th>
    <th><span>営業平均　</span>${average.sales_office + '%'}</th>`;
    thead__tr.insertAdjacentHTML('beforeend', th);
  });

  //上の表の右側の表を描画する
  window.addEventListener('DOMContentLoaded', async () => {
    const usersRate = await fetch(progressData)
      .then((res) => res.json())
      .then((r) => r.users);

    let oneHundred = 100;
    for (var variable of usersRate) {
      variable.percentage = (variable.completion_rate / oneHundred) * 100;
      console.log(variable.percentage);

      document.querySelector('#class__graf-container').insertAdjacentHTML(
        'beforeend',
        `<tr class="graf">
      <td class="graf-bar-bg">
      <div class="graf-bar" id="${variable.completion_rate}"><span></span></div>
      </td>
      </tr>`
      );
      //widthの指定
      document.getElementById('#' + variable.completion_rate).style.width =
        'variable.percentage + ' % '';
    }

    // });
  });
--js--

--json--
{
  "average": {
    "all": 95.3,
    "branch_office": 92.0,
    "sales_office": 88.9
  },
  "users": [
    {
      "user_id": "U000001", 
      "user_name": "松任谷 由美", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 94.6
    },
    {
      "user_id": "U000002", 
      "user_name": "大泉 洋", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 75.5
    },
    {
      "user_id": "U000003", 
      "user_name": "北島 三郎", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 58.0
    },
    {
      "user_id": "U000004", 
      "user_name": "中島 みゆき", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 35.5
    },
    {
      "user_id": "U000005", 
      "user_name": "窪田 正孝", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 18.8
    },
    {
      "user_id": "U000006", 
      "user_name": "ユーザー①", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 50.0
    },
    {
      "user_id": "U000007", 
      "user_name": "ユーザー②", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 50.0
    },
    {
      "user_id": "U000008", 
      "user_name": "ユーザー③", 
      "allocation_size": 37, 
      "completion_size": 35, 
      "non_completion_size": 2, 
      "completion_rate": 50.0
    }
  ]
}
--json--

試したこと

variable.percentageの部分で百分率を求めた。これをstyle.widthで表そうとした。
for文で格納されているデータ分出力しようとした。

補足情報（FW/ツールのバージョンなど）

Answer 1

      <div class="graf-bar" id="${variable.completion_rate}"><span></span></div>
      </td>
      </tr>`
      );
      //widthの指定
      document.getElementById('#' + variable.completion_rate).style.width =
        'variable.percentage + ' % '';

エラーの直接の原因はgetElementById() に #なんとか という引数を渡していることなので # を消すか querySelector() に変えればよいです。しかしそれを直しても「同じ完了率の最初の棒グラフしか幅が設定できない」という問題があるはずです。

1つのHTMLページ中で、同じid属性値を複数の要素に指定してはいけません。getElementById() は、指定したID値を持つ最初の要素だけを返します。ここは「class="graf-bar" を持つ最後の要素」などで対象を指定しましょう。

const graphBars = document.querySelectorAll('#class__graf-container .graf-bar');
graphBars[graphBars.length - 1].style.width = `${variable.percentage}%`;

HTMLの生成と同時にやってしまってもいいですね。

      <div class="graf-bar" style="width: ${variable.percentage}%;"><span></span></div>
      </td>
      </tr>`
      );

---

参考までに、この用途で横向きの棒グラフだと、<progress> が適任かもしれません。

Comments

[nao__funky]

ご回答ありがとうございました。説明がとてもわかりやすく、勉強になりました。時間はかかりましたが、無事実装できました。こんな私ですが、また機会ありましたら宜しくお願いします。

Answer 2

全くコードを確認していませんが、パッと見た感じだとスペースが入っているのが原因なのかな？と思いました。
下記の内容だとどうでしょうか？

document.getElementById(`#${variable.completion_rate}`).style.width =`${variable.percentage}%`;

Comments

[nao__funky]

ご回答ありがとうございます。うまくいきませんでした。
コンソールでは Uncaught (in promise) TypeError: Cannot read properties of null (reading 'style')というエラーが出てるので、styleメソッドが認識されてないのかなと考え、調べているとこです。

[kairi003]

それは「nullはstyleというプロパティを持っていない」と言うエラーです。
上記のコードだとしたらdocument.getElementByIdで要素が見つからないとnullが返ります。
idの#が余計なのでは？

[kobu]

もっとよく見てればよかったw
>idの#が余計なのでは？
これが原因ですね！！

[nao__funky]

ご回答ありがとうございます。よくみればid要素を取得する際はそうでした。小さなミスも勉強になりました。こんな私ですが、また機会がありましたら宜しくお願いします。